Prevent ESC key propagation in overlay components (#1213)

Author: jonathanlab

apps/code/src/renderer/features/command/components/CommandMenu.tsx

@@ -110,6 +110,7 @@ export function CommandMenu({ open, onOpenChange }: CommandMenuProps) {
       justify="center"
       className="fixed inset-0 z-50 bg-black/20"
       pt="9"
+      data-overlay="command-menu"
     >
       <div
         ref={commandRef}

apps/code/src/renderer/features/command/components/FilePicker.tsx

@@ -80,7 +80,6 @@ export function FilePicker({
         align="center"
         sideOffset={0}
         onInteractOutside={() => handleOpenChange(false)}
-        onEscapeKeyDown={(e) => e.stopPropagation()}
       >
         <Command.Root shouldFilter={false} label="File picker" key={resultsKey}>
           <Command.Input

apps/code/src/renderer/features/message-editor/components/MessageEditor.tsx

@@ -2,13 +2,11 @@ import "./message-editor.css";
 import type { SessionConfigOption } from "@agentclientprotocol/sdk";
 import { BranchSelector } from "@features/git-interaction/components/BranchSelector";
 import { useGitQueries } from "@features/git-interaction/hooks/useGitQueries";
-import { useSettingsDialogStore } from "@features/settings/stores/settingsDialogStore";
 import { useConnectivity } from "@hooks/useConnectivity";
 import { ArrowUp, Circle, Stop } from "@phosphor-icons/react";
 import { Flex, IconButton, Text, Tooltip } from "@radix-ui/themes";
-import { useCommandMenuStore } from "@stores/commandMenuStore";
-import { useShortcutsSheetStore } from "@stores/shortcutsSheetStore";
 import { EditorContent } from "@tiptap/react";
+import { hasOpenOverlay } from "@utils/overlay";
 import { forwardRef, useEffect, useImperativeHandle } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useDraftStore } from "../stores/draftStore";
@@ -148,11 +146,6 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
     const cloudBranch = context?.cloudBranch;
     const cloudDiffStats = context?.cloudDiffStats;
     const isSubmitDisabled = disabled || !isOnline;
-    const isSettingsOpen = useSettingsDialogStore((s) => s.isOpen);
-    const isCommandMenuOpen = useCommandMenuStore((s) => s.isOpen);
-    const isShortcutsSheetOpen = useShortcutsSheetStore((s) => s.isOpen);
-    const hasOverlay =
-      isSettingsOpen || isCommandMenuOpen || isShortcutsSheetOpen;
 
     const {
       editor,
@@ -223,6 +216,7 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
     useHotkeys(
       "escape",
       (e) => {
+        if (hasOpenOverlay()) return;
         if (isLoading && onCancel) {
           e.preventDefault();
           onCancel();
@@ -231,9 +225,9 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
       {
         enableOnFormTags: true,
         enableOnContentEditable: true,
-        enabled: isLoading && !!onCancel && !hasOverlay,
+        enabled: isLoading && !!onCancel,
       },
-      [isLoading, onCancel, hasOverlay],
+      [isLoading, onCancel],
     );
 
     const handleContainerClick = (e: React.MouseEvent) => {

apps/code/src/renderer/features/message-editor/tiptap/CommandMention.ts

@@ -48,6 +48,7 @@ function createSuggestion(
             trigger: "manual",
             placement: "top-start",
             offset: [0, 12],
+            duration: 0,
           });
         },
 
@@ -66,6 +67,7 @@ function createSuggestion(
 
         onKeyDown: (props) => {
           if (props.event.key === "Escape") {
+            props.event.stopPropagation();
             popup?.hide();
             return true;
           }

apps/code/src/renderer/features/message-editor/tiptap/FileMention.ts

@@ -51,6 +51,7 @@ function createSuggestion(
             trigger: "manual",
             placement: "top-start",
             offset: [0, 12],
+            duration: 0,
           });
         },
 
@@ -70,6 +71,7 @@ function createSuggestion(
 
         onKeyDown: (props) => {
           if (props.event.key === "Escape") {
+            props.event.stopPropagation();
             popup?.hide();
             return true;
           }

apps/code/src/renderer/features/settings/components/SettingsDialog.tsx

@@ -125,6 +125,7 @@ export function SettingsDialog() {
     <div
       className="fixed inset-0 z-[100] flex"
       style={{ backgroundColor: "var(--color-background)" }}
+      data-overlay="settings"
     >
       <div className="flex h-full w-[256px] shrink-0 flex-col border-gray-6 border-r pt-8">
         <button

apps/code/src/renderer/hooks/useBlurOnEscape.ts

@@ -1,10 +1,12 @@
 import { SHORTCUTS } from "@renderer/constants/keyboard-shortcuts";
+import { hasOpenOverlay } from "@utils/overlay";
 import { useHotkeys } from "react-hotkeys-hook";
 
 export function useBlurOnEscape() {
   useHotkeys(
     SHORTCUTS.BLUR,
     () => {
+      if (hasOpenOverlay()) return;
       if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur();
       }

apps/code/src/renderer/utils/overlay.test.ts

@@ -0,0 +1,64 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { hasOpenOverlay } from "./overlay";
+
+describe("hasOpenOverlay", () => {
+  let element: HTMLElement;
+
+  afterEach(() => {
+    element?.remove();
+  });
+
+  function addElement(tag: string, attrs: Record<string, string> = {}): void {
+    element = document.createElement(tag);
+    for (const [key, value] of Object.entries(attrs)) {
+      element.setAttribute(key, value);
+    }
+    document.body.appendChild(element);
+  }
+
+  it("returns false when no overlays exist", () => {
+    expect(hasOpenOverlay()).toBe(false);
+  });
+
+  it("detects role=dialog", () => {
+    addElement("div", { role: "dialog" });
+    expect(hasOpenOverlay()).toBe(true);
+  });
+
+  it("detects role=alertdialog", () => {
+    addElement("div", { role: "alertdialog" });
+    expect(hasOpenOverlay()).toBe(true);
+  });
+
+  it("detects role=menu", () => {
+    addElement("div", { role: "menu" });
+    expect(hasOpenOverlay()).toBe(true);
+  });
+
+  it("detects data-radix-popper-content-wrapper", () => {
+    addElement("div", { "data-radix-popper-content-wrapper": "" });
+    expect(hasOpenOverlay()).toBe(true);
+  });
+
+  it("detects data-overlay", () => {
+    addElement("div", { "data-overlay": "command-menu" });
+    expect(hasOpenOverlay()).toBe(true);
+  });
+
+  it("does not false-positive on role=listbox (inline autocomplete)", () => {
+    addElement("div", { role: "listbox" });
+    expect(hasOpenOverlay()).toBe(false);
+  });
+
+  it("does not false-positive on role=tooltip", () => {
+    addElement("div", { role: "tooltip" });
+    expect(hasOpenOverlay()).toBe(false);
+  });
+
+  it("returns false after overlay is removed", () => {
+    addElement("div", { role: "dialog" });
+    expect(hasOpenOverlay()).toBe(true);
+    element.remove();
+    expect(hasOpenOverlay()).toBe(false);
+  });
+});

apps/code/src/renderer/utils/overlay.ts

@@ -0,0 +1,11 @@
+const OVERLAY_SELECTORS = [
+  "[role='dialog']",
+  "[role='alertdialog']",
+  "[role='menu']",
+  "[data-radix-popper-content-wrapper]",
+  "[data-overlay]",
+].join(",");
+
+export function hasOpenOverlay(): boolean {
+  return document.querySelector(OVERLAY_SELECTORS) !== null;
+}