Unsolved MouseArea Inside Dynamic Height Item
-
I am creating a modal dialog for our embedded application. When a user touches outside of the modal, the modal should be hidden.
Here is some sample code:
Item {
width: parent.width
clip: trueRectangle { id: overlay anchors.fill: parent color: "#000" opacity: 0.8 clip: true MouseArea { anchors.fill: parent onClicked: showDiag = false } } Rectangle { id: contentWrapper width: parent.width * 0.85 height: childrenRect.height clip: true border.width: 5 border.color: "#000" anchors.centerIn: parent radius: 5 color: "#ddd" Column { width: parent.width spacing: 5 anchors { left: parent.left right: parent.right leftMargin: 15 rightMargin: 15 } // ITEMS GO HERE... } }
}
My issue is that if you click inside of the "contentWrapper" box, the MouseArea underneath it is triggered, and the window gets hidden. Is there a way that I can block that interaction? I can't use another MouseArea inside of "contentWrapper" because it's a dynamic height and I'll get a binding loop.
Any help would be appreciated.