Fix #132: don't clear sidebar search on Escape while a dialog is open

Author: paul-brooks

ui2/src/App.tsx

@@ -16,6 +16,7 @@ import {Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSe
 import {TestContainer} from './components/TestContainer';
 import {NotesCard} from './components/NotesCard';
 import {TooltipProvider} from "@/components/ui/tooltip";
+import {hasOpenDialog, shouldClearSearchOnEscape} from "@/util/escapeGuard";
 
 const App = () => {
     const [config, setConfig] = useState<KensaConfig>(DEFAULT_CONFIG);
@@ -147,7 +148,13 @@ const App = () => {
 
     useEffect(() => {
         const handleEscape = (e: KeyboardEvent) => {
-            if (e.key === "Escape" && searchQueryRef.current && !commandOpenRef.current) {
+            if (e.key !== "Escape") return;
+            const clear = shouldClearSearchOnEscape({
+                hasQuery: !!searchQueryRef.current,
+                isCommandOpen: commandOpenRef.current,
+                isDialogOpen: hasOpenDialog(),
+            });
+            if (clear) {
                 e.preventDefault();
                 onSearchChange('');
             }

ui2/src/components/AppSidebar.tsx

@@ -13,6 +13,7 @@ import {Popover, PopoverContent, PopoverTrigger,} from "@/components/ui/popover"
 import {Kbd, KbdGroup} from "@/components/ui/kbd"
 import {useConfig} from "@/contexts/ConfigContext"
 import {matchesAnyIssue} from "@/util/issueMatch"
+import {hasOpenDialog} from "@/util/escapeGuard"
 
 interface StateCounts {
     passed: number;
@@ -91,7 +92,7 @@ export function AppSidebar({indices, searchQuery, onSearchChange, onSelect, sele
 
     React.useEffect(() => {
         const handleEscape = (e: KeyboardEvent) => {
-            if (e.key === 'Escape' && inputValueRef.current) {
+            if (e.key === 'Escape' && inputValueRef.current && !hasOpenDialog()) {
                 e.preventDefault();
                 setInputValue('');
                 setShowPicker(false);

ui2/src/util/escapeGuard.test.ts

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest';
+import { shouldClearSearchOnEscape } from './escapeGuard';
+
+describe('shouldClearSearchOnEscape', () => {
+    it('returns true when there is a query and nothing else is open', () => {
+        expect(shouldClearSearchOnEscape({ hasQuery: true, isCommandOpen: false, isDialogOpen: false })).toBe(true);
+    });
+
+    it('returns false when the query is empty', () => {
+        expect(shouldClearSearchOnEscape({ hasQuery: false, isCommandOpen: false, isDialogOpen: false })).toBe(false);
+    });
+
+    it('returns false when the command palette is open', () => {
+        expect(shouldClearSearchOnEscape({ hasQuery: true, isCommandOpen: true, isDialogOpen: false })).toBe(false);
+    });
+
+    it('returns false when any dialog is open', () => {
+        expect(shouldClearSearchOnEscape({ hasQuery: true, isCommandOpen: false, isDialogOpen: true })).toBe(false);
+    });
+});

ui2/src/util/escapeGuard.ts

@@ -0,0 +1,14 @@
+export interface EscapeState {
+    hasQuery: boolean;
+    isCommandOpen: boolean;
+    isDialogOpen: boolean;
+}
+
+export function shouldClearSearchOnEscape(state: EscapeState): boolean {
+    return state.hasQuery && !state.isCommandOpen && !state.isDialogOpen;
+}
+
+export function hasOpenDialog(): boolean {
+    if (typeof document === 'undefined') return false;
+    return document.querySelector('[role="dialog"][data-state="open"]') !== null;
+}