QmlDesigner: Add focus handling to close popup

Add proper focus handling to the expression builder in order to close
the popup when e.g. clicking outside.

Change-Id: I5ea8422c727b5fc6e47dc77866b709e4ec04e6fd
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml

@@ -20,6 +20,10 @@ Column {
     width: parent.width
     spacing: root.verticalSpacing
 
+    TapHandler {
+        onTapped: root.forceActiveFocus()
+    }
+
     Row {
         spacing: root.horizontalSpacing
 

share/qtcreator/qmldesigner/connectionseditor/ExpressionBuilder.qml

@@ -34,7 +34,8 @@ Rectangle {
 
     width: 400
     height: root.expressionHeight + 2 * StudioTheme.Values.flowMargin
-    color: root.style.background.idle
+    color: (focusScope.activeFocus || popup.searchActive) ? root.style.background.interaction
+                                                          : root.style.background.idle
     border {
         color: root.conditionListModel.valid ? root.style.border.idle
                                              : StudioTheme.Values.themeError
@@ -215,6 +216,15 @@ Rectangle {
         }
     }
 
+    FocusScope {
+        id: focusScope
+        anchors.fill: parent
+
+        onActiveFocusChanged: {
+            if (!focusScope.activeFocus && !popup.searchActive)
+                popup.close()
+        }
+
         Flow {
             id: flow
 
@@ -279,8 +289,8 @@ Rectangle {
 
                     onSubmit: function (cursorPosition) {
                         let index = pill.index
-                    // If cursor position is 0 the user moved the cursor out to left side, so place
+                        // If cursor position is 0 the user moved the cursor out to left side,
-                    // the cursor before the pill
+                        // so place the cursor before the pill
                         if (cursorPosition !== 0)
                             index++
 
@@ -302,13 +312,6 @@ Rectangle {
             visible: false
             validator: RegularExpressionValidator { regularExpression: /^\S.+/ }
 
-        //onActiveFocusChanged: {
-        //    if (!newTextInput.activeFocus && !root.shadowPillVisible) {
-        //        console.log("CLOSE POPUP")
-        //        popup.close()
-        //    }
-        //}
-
             onTextEdited: {
                 if (newTextInput.text === "")
                     return
@@ -340,6 +343,8 @@ Rectangle {
             }
         }
 
+    }
+
     SuggestionPopup {
         id: popup
 
@@ -348,12 +353,15 @@ Rectangle {
         x: 0
         y: root.height
         width: root.width
-
         operatorModel: __operatorModel
 
         //onOpened: console.log("POPUP opened")
         //onClosed: console.log("POPUP closed")
 
+        onAboutToHide: {
+            newTextInput.visible = false
+        }
+
         onSelect: function(value) {
             newTextInput.visible = true
             newTextInput.forceActiveFocus()

share/qtcreator/qmldesigner/connectionseditor/SuggestionPopup.qml

@@ -30,8 +30,9 @@ Controls.Popup {
         root.listModel.reset()
     }
 
-    closePolicy: Controls.Popup.NoAutoClose
+    closePolicy: Controls.Popup.CloseOnEscape | Controls.Popup.CloseOnPressOutsideParent
     padding: 0
+    focus: search.activeFocus
 
     background: Rectangle {
         implicitWidth: root.width

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/ConnectionPopupControlStyle.qml

@@ -15,7 +15,7 @@ ControlStyle {
         idle: Values.themePopoutControlBackground_idle
         hover: Values.themePopoutControlBackground_hover
         globalHover: Values.themePopoutControlBackground_globalHover
-        interaction: Values.themeInteraction
+        interaction: Values.themeControlBackgroundInteraction
         disabled: Values.themePopoutControlBackground_disabled
     }