MouseArea Inside Dynamic Height Item

rchamberlin

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: true

Rectangle {
    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.