MouseArea inside Flickable is preventing it from flicking

Question

I'm implementing gesture catcher (swipe left/right) with MouseArea. It should work inside Flickable with vertical flickableDirection. Also it should propagate mouse events to other elements beneath it in visual stack order. The problem is that child mouseArea with propagateComposedEvents set to true is blocking any parent's flicks before exact one click is made. After first click is made it's working correctly. Here is simplified code that is showing this.

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    id: __root
    visible: true
    width: 460; height: 640

    Flickable {
        id: mainFlickable

        width: parent.width
        height: parent.height
        contentHeight: column.height
        flickableDirection: Flickable.VerticalFlick

        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
            z: 1
        }

        Column {
            id: column

            width: parent.width

            Repeater {
                model: 5

                Rectangle {
                    width: __root.width
                    height: 200

                    color: "yellow"
                    border.width: 2

                    MouseArea {
                        anchors.fill: parent

                        onClicked: {
                            console.log("clicked")
                        }
                    }
                }
            } //repeater
        } //column
    } //flickable
} //window

I spent quite some time trying to fix this and will appreciate any help. Thanks in advance!

Answer 1

I found that following signal handler in MouseArea is a workaround for this and don't break my code:

onReleased: {
    if (!propagateComposedEvents) {
        propagateComposedEvents = true
    }
}

propagateComposedEvents should be set to false on the declaration (or ommited).

Thank you all for the efforts!

Answer 2

I found little workaround for this. Hope it will fit your needs (at least until better solution will be provided).

Here is your updated code:

import QtQuick 2.4
import QtQuick.Window 2.2

Window {
    id: __root
    visible: true
    width: 460; height: 640

    Flickable {
        id: mainFlickable

        width: parent.width
        height: parent.height
        contentHeight: column.height
        flickableDirection: Flickable.VerticalFlick

        onDragStarted: ma.enabled = false
        onDragEnded: ma.enabled = true

        MouseArea {
            id: ma
            anchors.fill: parent
            enabled: false
            propagateComposedEvents: true
            z: 100

            onClicked: {
                print("CLICKED ON UPPER")
                mouse.accepted = false
            }
        }

        Column {
            id: column

            width: parent.width

            Repeater {
                model: 5

                Rectangle {
                    width: __root.width
                    height: 200

                    color: "yellow"
                    border.width: 2

                    MouseArea {
                        anchors.fill: parent                  
                        onClicked: console.log("clicked on child") 
                    }
                }
            } //repeater
        } //column
    } //flickable
} //window