mousearea outside flickable not working

[joko]

Hi,

I know this is somewhat easy however I can't figure out what prevents the mousearea from working when the parent height of the flickable is less than its (flickable) content height, other than that mousearea is okay.

Item
{
    MouseArea
    {
        id: mouseArea
        anchors.fill: parent
        onClicked: { console.log("yes") }
    }
 
    Flickable
    {
        id: main
        contentHeight: 160
        anchors.fill: parent
        boundsBehavior: Flickable.StopAtBounds
        interactive: parent.height > contentHeight ? false : true
 
        Rectangle
        {
            id: body
            anchors {
                left: parent.left
                right: parent.right
            }
        }
    }
}

Item
{
    MouseArea
    {
        id: mouseArea
        anchors.fill: parent
        onClicked: { console.log("yes") }
    }

    Flickable
    {
        id: main
        contentHeight: 160
        anchors.fill: parent
        boundsBehavior: Flickable.StopAtBounds
        interactive: parent.height > contentHeight ? false : true

        Rectangle
        {
            id: body
            anchors {
                left: parent.left
                right: parent.right
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

Thanks.

[wysota]

Flickable also does mouse event handling and it probably steals events from your MouseArea. See if setting "preventStealing" to true helps.

[joko]

Flickable also does mouse event handling and it probably steals events from your MouseArea. See if setting "preventStealing" to true helps.

I already tried setting "preventStealing" to true, same issue.

Thanks.

[joko]

I managed to get it working by using propagateComposedEvents instead

Item
{
    MouseArea
    {
        id: mouseArea
        anchors.fill: parent
        onClicked: { console.log("yes") }
    }
 
    Flickable
    {
        id: main
        contentHeight: 160
        anchors.fill: parent
        boundsBehavior: Flickable.StopAtBounds
        interactive: parent.height > contentHeight ? false : true
 
        MouseArea
        {
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: { mouse.accepted = false }
        }
 
        Rectangle
        {
            id: body
            anchors {
                left: parent.left
                right: parent.right
            }
        }
    }
}

Item
{
    MouseArea
    {
        id: mouseArea
        anchors.fill: parent
        onClicked: { console.log("yes") }
    }

    Flickable
    {
        id: main
        contentHeight: 160
        anchors.fill: parent
        boundsBehavior: Flickable.StopAtBounds
        interactive: parent.height > contentHeight ? false : true

        MouseArea
        {
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: { mouse.accepted = false }
        }

        Rectangle
        {
            id: body
            anchors {
                left: parent.left
                right: parent.right
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode