Bugfix: closing Search or Select files with Esc no longer kills pane keyboard navigation

vdavid · vdavid · commit 040d424e19b7 · 2026-06-10T15:56:03.000+02:00
`QueryDialog` (the shared Search/Select orchestrator) never restored focus on close, unlike `CommandPalette` and `ModalDialog`. Focus fell to `&lt;body&gt;`, so arrow keys stopped moving the pane cursor and natively scrolled the pane instead, until the user clicked back in. Worse, any dialog opened afterwards captured `&lt;body&gt;` as its own restore target, so the dead-keyboard state survived dialog round-trips.

The dialog now captures `document.activeElement` synchronously on mount and restores it on destroy, the same pattern the palette uses. Regression test verified red-first against the unfixed code.
diff --git a/apps/desktop/src/lib/query-ui/QueryDialog.svelte b/apps/desktop/src/lib/query-ui/QueryDialog.svelte
@@ -188,6 +188,9 @@
         queryInputElement?.focus()
     }
 
+    /** Element that had focus when the dialog opened (the pane container). Restored on close. */
+    let previousActiveElement: HTMLElement | null = null
+
     function openRecentPopover(): void {
         recentPopoverOpen = true
     }
@@ -197,6 +200,8 @@
     }
 
     onMount(async () => {
+        // Capture synchronously, before the awaits below and before focusInput() moves focus.
+        previousActiveElement = document.activeElement instanceof HTMLElement ? document.activeElement : null
         notifyDialogOpened(config.dialogType).catch(() => {})
         window.addEventListener('keydown', handleEscapeCapture, true)
         // D8: mark the dialog as freshly opened so ⏎ owns "run-search" by default
@@ -244,6 +249,13 @@
         unlistenAutoApply?.()
         window.removeEventListener('keydown', handleEscapeCapture, true)
         if (debounceTimer) clearTimeout(debounceTimer)
+        // Restore focus to whatever had it before we opened (the pane container), if it's
+        // still in the DOM. Without this, focus falls to <body> after close: arrow keys stop
+        // moving the pane cursor and natively scroll the pane instead, until the user clicks
+        // back in. Same pattern as CommandPalette and ModalDialog.
+        if (previousActiveElement?.isConnected) {
+            previousActiveElement.focus()
+        }
         // State is intentionally NOT cleared. Close + reopen preserves the user's
         // query/filters/results/cursor. The only reset path is ⌘N inside the dialog.
     })
diff --git a/apps/desktop/src/lib/query-ui/QueryDialog.svelte.test.ts b/apps/desktop/src/lib/query-ui/QueryDialog.svelte.test.ts
@@ -413,3 +413,22 @@ describe('QueryDialog lastDialogEvent ownership', () => {
     cleanup()
   })
 })
+
+describe('QueryDialog focus restore', () => {
+  it('returns focus to the previously focused element on unmount', async () => {
+    const outside = document.createElement('button')
+    document.body.appendChild(outside)
+    outside.focus()
+    const { cleanup } = mountQueryDialog()
+    // Let the async onMount settle and move focus into the dialog's input.
+    await tick()
+    await Promise.resolve()
+    await tick()
+    expect(document.activeElement).not.toBe(outside)
+    cleanup()
+    await tick()
+    // Pre-fix this landed on <body>, leaving pane keyboard nav dead after Escape.
+    expect(document.activeElement).toBe(outside)
+    outside.remove()
+  })
+})
