MouseArea inside Flickable is preventing it from flicking - qt

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