Catch mouse click to hide item

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

Code:

---

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 = ""
    }
}

---

Main.qml

Code:

---

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

---

*PS: I have many comboBoxes on main.qml

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.

Quote:

---

Originally Posted by 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.

---

As always, you're the best!