fix(webapp): stop Esc in a text field from closing panels

The Esc close shortcuts are registered on `document`, so
`enabledOnInputElements: true` made them fire from every input on the page,
not just fields inside the panel. Typing in a page-level search box or the
chat composer and pressing Esc closed the panel behind it.

The composer and SearchInput tried to guard against this with
`stopPropagation` on the React `onKeyDown`, which cannot work: the app
hydrates into `document`, so React's delegated listener and the hotkey
listener are siblings on the same node and only
`stopImmediatePropagation` would stop the other one.

Drop the flag from the nine Esc close shortcuts instead, so the focused
field handles Esc itself: it clears a search box or leaves the composer with
the draft intact, and a second Esc closes the panel.

Verified in a browser against the seeded References org: Esc from a
page-level search box or a composer with a draft no longer closes the chat
panel, a second Esc does, and Esc still closes dialogs, sheets, detail
panels, and closes only an open dropdown when one is layered over a panel.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: claude

.server-changes/esc-to-close-fixes.md

@@ -3,4 +3,4 @@ area: webapp
 type: fix
 ---
 
-Esc now closes the authenticator app setup window, the chat panel, and detail panels while you're typing in one of their fields. Panels that hold an editor or a form you're filling in keep what you've typed instead of closing, and clicking outside the authenticator app setup window no longer cancels the setup. Every side sheet now shows its Esc shortcut, closing a dialog with Esc no longer also closes the panel behind it, and the Vercel setup modal no longer shows a close button it ignores.
+Esc now closes the authenticator app setup window, the chat panel and detail panels, and clicking outside the authenticator app setup window no longer cancels the setup. While you're typing in a field, Esc leaves that field first — clearing a search box, or keeping an unsent message — so a second Esc closes the panel and a stray Esc no longer discards what you typed or shuts a panel you were working in. Every side sheet now shows its Esc shortcut, closing a dialog with Esc no longer also closes the panel behind it, and the Vercel setup modal no longer shows a close button it ignores.

apps/webapp/app/components/dashboard-agent/DashboardAgentComposer.tsx

@@ -31,9 +31,9 @@ export function DashboardAgentComposer({
                 e.preventDefault();
                 onSubmit();
               }
-              // Keep an unsent message: Esc blurs first, so only a second Esc closes the panel.
-              if (e.key === "Escape" && value.trim().length > 0) {
-                e.stopPropagation();
+              // Esc leaves the composer, so a second Esc closes the panel and an
+              // unsent message survives the first one.
+              if (e.key === "Escape") {
                 e.currentTarget.blur();
               }
             }}

apps/webapp/app/components/dashboard-agent/DashboardAgentHeader.tsx

@@ -28,7 +28,7 @@ export function DashboardAgentHeader({
           onClick={onClose}
           variant="minimal/small"
           TrailingIcon={XMarkIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
           aria-label="Close"

apps/webapp/app/components/logs/LogDetailView.tsx

@@ -117,7 +117,7 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
             onClick={onClose}
             variant="minimal/small"
             TrailingIcon={ExitIcon}
-            shortcut={{ key: "esc", enabledOnInputElements: true }}
+            shortcut={{ key: "esc" }}
             shortcutPosition="before-trailing-icon"
             className="pl-1"
           />
@@ -138,7 +138,7 @@ export function LogDetailView({ logId, initialLog, onClose, searchTerm }: LogDet
           onClick={onClose}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />

apps/webapp/app/components/primitives/SearchInput.tsx

@@ -127,7 +127,6 @@ export function SearchInput({
             }
             if (e.key === "Escape") {
               if (text.length > 0) {
-                e.stopPropagation();
                 handleClear();
               } else {
                 e.currentTarget.blur();

apps/webapp/app/hooks/useShortcutKeys.tsx

@@ -23,6 +23,11 @@ type useShortcutKeysProps = {
   shortcut: ShortcutDefinition | undefined;
   action: (event: KeyboardEvent) => void;
   disabled?: boolean;
+  /**
+   * Shortcuts are registered on `document`, so this fires the shortcut from every
+   * input on the page, not just the ones near it. Don't set it on an Escape
+   * close shortcut: let the focused field handle Escape and close on the second press.
+   */
   enabledOnInputElements?: boolean;
   /**
    * The element this shortcut belongs to. When set, an Escape shortcut is ignored

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx

@@ -844,7 +844,7 @@ function NewTaskPromptsPanel({ onClose }: { onClose: () => void }) {
           onClick={onClose}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.batches.$batchParam/route.tsx

@@ -96,7 +96,7 @@ export default function Page() {
           to={v3BatchesPath(organization, project, environment)}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.bulk-actions.$bulkActionParam/route.tsx

@@ -183,7 +183,7 @@ export default function Page() {
           to={v3BulkActionsPath(organization, project, environment)}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.deployments.$deploymentParam/route.tsx

@@ -340,7 +340,7 @@ export default function Page() {
           }`}
           variant="minimal/small"
           TrailingIcon={ExitIcon}
-          shortcut={{ key: "esc", enabledOnInputElements: true }}
+          shortcut={{ key: "esc" }}
           shortcutPosition="before-trailing-icon"
           className="pl-1"
         />