How to hide a QML Window when it loses focus

Viewed 13138

I am trying to create a combo box with multiple selection using QML. Its dropdown will be a QML Window with the flag Qt.Popup so it will not have a title bar. The dropdown should disappear when the user clicks outside of it.

I tried the following code:

import QtQuick 2.0
import QtQuick.Window 2.0

Window { id: mainWindow
    width: 200
    height: 200
    MouseArea {
        anchors.fill: parent
        onClicked: {
            dropdown.x = mainWindow.x + 50;
            dropdown.y = mainWindow.y + 50;
            dropdown.visible = true;
        }
    }

    Window { id: dropdown
        height: 200
        width: 200
        flags: Qt.Popup
        color: 'green'
        visible: false
        onVisibleChanged: {
            if (visible) {
                focusScope.focus = true;
                focusScope.forceActiveFocus();
            }
        }

        FocusScope { id: focusScope
            focus: true
            anchors {
                fill: parent
            }

            onActiveFocusChanged: {
                if (!activeFocus) {
                    dropdown.visible = false;
                }
            }
        }
    }
}

And it doesn't work.

In the code above when the user clicks on the main window, a popup appears and if the user clicks on another window or on the title bar of the main window it should disappear but it doesn't do that.

If I import version 2.1 of QtQuick.Window instead of 2.0 I can put a 'onActiveChanged' handler (without getting an error) inside the dropdown Window but it is never called.

Maybe I would be able to do this using some C++ but I try to avoid that.

I use Qt 5.1.1 on Ubuntu 13.10.

Thank you.

Update: I switched to Qt 5.2 and solved the problem (see my answer below).

3 Answers

Lost hours trying to bind to ActiveChanged. Found another solution

onActiveFocusItemChanged: {
    if (!activeFocusItem) {
        _.visible = false
    }
}
Related