Catch mouse click to hide item

[joko]

Hi,

I'm having problem catching the outside click of my custom combobox item to hide the dropdown.
Any help is greatly appreciated. TIA.

CustomComboBox.qml

FocusScope
{
 
    MouseArea
    {
        id: mouseArea
        anchors.fill: container
        onClicked: { container.focus = true; toggle() }
        onExited: close()
    }
 
    Rectangle
    {
        id: dropDown
        // some codes for ListView to delegate list items
        states: [
            State {
                name: "visible";
                PropertyChanges { target: dropDown; height: container.height * listView.count }
            }
        ]
    }
 
    function toggle() {
        if (dropDown.state === "visible") { close(false) } else { open() }
    }
 
    function open() {
        dropDown.state = "visible"
    }
 
    function close(update) {
        dropDown.state = ""
    }
}

FocusScope
{

    MouseArea
    {
        id: mouseArea
        anchors.fill: container
        onClicked: { container.focus = true; toggle() }
        onExited: close()
    }

    Rectangle
    {
        id: dropDown
        // some codes for ListView to delegate list items
        states: [
            State {
                name: "visible";
                PropertyChanges { target: dropDown; height: container.height * listView.count }
            }
        ]
    }

    function toggle() {
        if (dropDown.state === "visible") { close(false) } else { open() }
    }

    function open() {
        dropDown.state = "visible"
    }

    function close(update) {
        dropDown.state = ""
    }
}

To copy to clipboard, switch view to plain text mode 

Main.qml

Rectangle
{
   CustomComboBox
   {
       id: textCmb
   }
 
   Mousearea
   {
    onClicked: // here i'm having problem hiding the dropdown of textCmb
 
   }
}

Rectangle
{
   CustomComboBox
   {
       id: textCmb
   }

   Mousearea
   {
    onClicked: // here i'm having problem hiding the dropdown of textCmb

   }
}

To copy to clipboard, switch view to plain text mode 

*PS: I have many comboBoxes on main.qml

[wysota]

When you show the popup, make it a child of a MouseArea item which covers the whole screen/window. Catch clicks on this mouse area and hide the popup.

[joko]

When you show the popup, make it a child of a MouseArea item which covers the whole screen/window. Catch clicks on this mouse area and hide the popup.

As always, you're the best!