Fix focus issues with add widget dialog

Modals/Settings/SettingsContent.qml

@@ -68,6 +68,7 @@ Item {
             asynchronous: true
 
             sourceComponent: DankBarTab {
+                parentModal: root.parentModal
             }
 
         }

Modules/Settings/DankBarTab.qml

@@ -8,6 +8,8 @@ import qs.Widgets
 Item {
     id: dankBarTab
 
+    property var parentModal: null
+
     function getWidgetsForPopup() {
         return baseWidgetDefinitions.filter(widget => {
             if (widget.warning && widget.warning.includes("Plugin is disabled")) {
@@ -1159,7 +1161,7 @@ Item {
                                          widgetSelectionPopup.allWidgets
                                          = dankBarTab.getWidgetsForPopup()
                                          widgetSelectionPopup.targetSection = sectionId
-                                         widgetSelectionPopup.safeOpen()
+                                         widgetSelectionPopup.show()
                                      }
                         onRemoveWidget: (sectionId, widgetIndex) => {
                                             dankBarTab.removeWidgetFromSection(
@@ -1231,7 +1233,7 @@ Item {
                                          widgetSelectionPopup.allWidgets
                                          = dankBarTab.getWidgetsForPopup()
                                          widgetSelectionPopup.targetSection = sectionId
-                                         widgetSelectionPopup.safeOpen()
+                                         widgetSelectionPopup.show()
                                      }
                         onRemoveWidget: (sectionId, widgetIndex) => {
                                             dankBarTab.removeWidgetFromSection(
@@ -1303,7 +1305,7 @@ Item {
                                          widgetSelectionPopup.allWidgets
                                          = dankBarTab.getWidgetsForPopup()
                                          widgetSelectionPopup.targetSection = sectionId
-                                         widgetSelectionPopup.safeOpen()
+                                         widgetSelectionPopup.show()
                                      }
                         onRemoveWidget: (sectionId, widgetIndex) => {
                                             dankBarTab.removeWidgetFromSection(
@@ -1349,7 +1351,7 @@ Item {
     WidgetSelectionPopup {
         id: widgetSelectionPopup
 
-        anchors.centerIn: parent
+        parentModal: dankBarTab.parentModal
         onWidgetSelected: (widgetId, targetSection) => {
                               dankBarTab.addWidgetToSection(widgetId,
                                                            targetSection)

Modules/Settings/WidgetSelectionPopup.qml

@@ -1,18 +1,20 @@
 import QtQuick
 import QtQuick.Controls
 import qs.Common
+import qs.Modals.Common
 import qs.Widgets
 
-Popup {
+DankModal {
     id: root
 
     property var allWidgets: []
     property string targetSection: ""
-    property bool isOpening: false
     property string searchQuery: ""
     property var filteredWidgets: []
     property int selectedIndex: -1
     property bool keyboardNavigationActive: false
+    property Component widgetSelectionContent
+    property var parentModal: null
 
     signal widgetSelected(string widgetId, string targetSection)
 
@@ -70,26 +72,33 @@ Popup {
         }
     }
 
-    function safeOpen() {
+    function show() {
-        if (!isOpening && !visible) {
+        if (parentModal) {
-            isOpening = true
+            parentModal.shouldHaveFocus = false
-            open()
+        }
+        open()
+        Qt.callLater(() => {
+            if (contentLoader.item && contentLoader.item.searchField) {
+                contentLoader.item.searchField.forceActiveFocus()
+            }
+        })
+    }
+
+    function hide() {
+        close()
+        if (parentModal) {
+            parentModal.shouldHaveFocus = Qt.binding(() => {
+                return parentModal.shouldBeVisible
+            })
         }
     }
 
     width: 500
     height: 550
-    modal: true
+    allowStacking: true
-    focus: true
+    backgroundOpacity: 0
-    closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+    closeOnEscapeKey: false
-    onOpened: {
+    onDialogClosed: () => {
-        isOpening = false
-        Qt.callLater(() => {
-            searchField.forceActiveFocus()
-        })
-    }
-    onClosed: {
-        isOpening = false
         allWidgets = []
         targetSection = ""
         searchQuery = ""
@@ -97,19 +106,19 @@ Popup {
         selectedIndex = -1
         keyboardNavigationActive = false
     }
-
+    onBackgroundClicked: () => {
-    background: Rectangle {
+        return hide()
-        color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g,
-                       Theme.surfaceContainer.b, 1)
-        border.color: Theme.primarySelected
-        border.width: 0
-        radius: Theme.cornerRadius
     }
+    content: widgetSelectionContent
+
+    widgetSelectionContent: Component {
+        FocusScope {
+        id: widgetKeyHandler
+        property alias searchField: searchField
 
-    contentItem: Item {
         anchors.fill: parent
         focus: true
-        
+
         Keys.onPressed: event => {
             if (event.key === Qt.Key_Escape) {
                 root.close()
@@ -141,10 +150,8 @@ Popup {
                     root.close()
                 }
                 event.accepted = true
-            } else if (event.text && event.text.length > 0 && event.text.match(/[a-zA-Z0-9\\s]/)) {
+            } else if (!searchField.activeFocus && event.text && event.text.length > 0 && event.text.match(/[a-zA-Z0-9\s]/)) {
-                if (!searchField.activeFocus) {
+                searchField.forceActiveFocus()
-                    searchField.forceActiveFocus()
-                }
                 searchField.insertText(event.text)
                 event.accepted = true
             }
@@ -204,19 +211,20 @@ Popup {
                 height: 48
                 cornerRadius: Theme.cornerRadius
                 backgroundColor: Theme.surfaceContainerHigh
-                normalBorderColor: Qt.rgba(Theme.outline.r, Theme.outline.g, Theme.outline.b, 0.2)
+                normalBorderColor: Theme.outlineMedium
                 focusedBorderColor: Theme.primary
                 leftIconName: "search"
-                leftIconSize: Theme.iconSize - 2
+                leftIconSize: Theme.iconSize
-                leftIconColor: Theme.outline
+                leftIconColor: Theme.surfaceVariantText
                 leftIconFocusedColor: Theme.primary
                 showClearButton: true
                 textColor: Theme.surfaceText
                 font.pixelSize: Theme.fontSizeMedium
-                placeholderText: "Search widgets..."
+                placeholderText: ""
                 text: root.searchQuery
+                focus: true
                 ignoreLeftRightKeys: true
-                keyForwardTargets: [root.contentItem]
+                keyForwardTargets: [widgetKeyHandler]
                 onTextEdited: {
                     root.searchQuery = text
                     updateFilteredWidgets()
@@ -225,7 +233,7 @@ Popup {
                     if (event.key === Qt.Key_Escape) {
                         root.close()
                         event.accepted = true
-                    } else if (event.key === Qt.Key_Down || event.key === Qt.Key_Up || 
+                    } else if (event.key === Qt.Key_Down || event.key === Qt.Key_Up ||
                                ((event.key === Qt.Key_Return || event.key === Qt.Key_Enter) && text.length === 0)) {
                         event.accepted = false
                     }
@@ -322,5 +330,6 @@ Popup {
                 }
             }
         }
+        }
     }
 }