fix: standardize ESC key handling with shared hook

- Create useEscapeKey hook for consistent implementation
- Update all popover components to use the new hook
- Change event listener from document to window
- Add preventDefault and stopPropagation support
- Add ESC handling to ModelPicker for consistency
- Add comprehensive tests for ESC key functionality
- Remove problematic CodeIndexPopover validation tests

Author: roomote

webview-ui/src/__tests__/SearchableSelect.spec.tsx

@@ -253,4 +253,67 @@ describe("SearchableSelect", () => {
 			expect(within(dropdown).queryByText("Option 3")).not.toBeInTheDocument()
 		})
 	})
+
+	it("closes the dropdown when ESC key is pressed", async () => {
+		const user = userEvent.setup()
+		render(<SearchableSelect {...defaultProps} />)
+
+		// Open the dropdown
+		const trigger = screen.getByRole("combobox")
+		await user.click(trigger)
+
+		// Verify dropdown is open
+		expect(trigger).toHaveAttribute("aria-expanded", "true")
+		expect(screen.getByRole("listbox")).toBeInTheDocument()
+
+		// Press ESC key
+		fireEvent.keyDown(window, { key: "Escape" })
+
+		// Verify dropdown is closed
+		await waitFor(() => {
+			expect(trigger).toHaveAttribute("aria-expanded", "false")
+			expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+		})
+	})
+
+	it("does not close the dropdown when ESC is pressed while dropdown is closed", async () => {
+		render(<SearchableSelect {...defaultProps} />)
+
+		const trigger = screen.getByRole("combobox")
+
+		// Ensure dropdown is closed
+		expect(trigger).toHaveAttribute("aria-expanded", "false")
+
+		// Press ESC key
+		fireEvent.keyDown(window, { key: "Escape" })
+
+		// Verify dropdown remains closed
+		expect(trigger).toHaveAttribute("aria-expanded", "false")
+		expect(screen.queryByRole("listbox")).not.toBeInTheDocument()
+	})
+
+	it("prevents default and stops propagation when ESC is pressed", async () => {
+		const user = userEvent.setup()
+		render(<SearchableSelect {...defaultProps} />)
+
+		// Open the dropdown
+		const trigger = screen.getByRole("combobox")
+		await user.click(trigger)
+
+		// Create a mock event to track preventDefault and stopPropagation
+		const escapeEvent = new KeyboardEvent("keydown", {
+			key: "Escape",
+			bubbles: true,
+			cancelable: true,
+		})
+		const preventDefaultSpy = vi.spyOn(escapeEvent, "preventDefault")
+		const stopPropagationSpy = vi.spyOn(escapeEvent, "stopPropagation")
+
+		// Dispatch the event
+		window.dispatchEvent(escapeEvent)
+
+		// Verify preventDefault and stopPropagation were called
+		expect(preventDefaultSpy).toHaveBeenCalled()
+		expect(stopPropagationSpy).toHaveBeenCalled()
+	})
 })

webview-ui/src/components/chat/CodeIndexPopover.tsx

@@ -38,6 +38,7 @@ import {
 } from "@src/components/ui"
 import { AlertTriangle } from "lucide-react"
 import { useRooPortal } from "@src/components/ui/hooks/useRooPortal"
+import { useEscapeKey } from "@src/hooks/useEscapeKey"
 import type { EmbedderProvider } from "@roo/embeddingModels"
 import type { IndexingStatus } from "@roo/ExtensionMessage"
 import { CODEBASE_INDEX_DEFAULTS } from "@roo-code/types"
@@ -440,22 +441,8 @@ export const CodeIndexPopover: React.FC<CodeIndexPopoverProps> = ({
 		})
 	}, [checkUnsavedChanges])
 
-	// Add ESC key handler
-	useEffect(() => {
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if (event.key === "Escape" && open) {
-				// Use the same logic as clicking outside - check for unsaved changes
-				handlePopoverClose()
-			}
-		}
-
-		if (open) {
-			document.addEventListener("keydown", handleKeyDown)
-			return () => {
-				document.removeEventListener("keydown", handleKeyDown)
-			}
-		}
-	}, [open, handlePopoverClose])
+	// Use the shared ESC key handler hook - respects unsaved changes logic
+	useEscapeKey(open, handlePopoverClose)
 
 	const handleSaveSettings = () => {
 		// Validate settings before saving