fix(plugin-detail): a text field in an open face keeps its Esc, and the record pane stays open around it

The face let an Esc pressed in a text field go on to the field, unmarked, so
inside the record pane the drawer's dialog layer took it next and closed the
whole pane: Esc in the 动态 tab's composer dropped the reader on the list with
`?related=timeline` still in the URL. A field in the face still gets the key
(it closes its mention list, cancels an inline edit), and the face marks it
handled, so the drawer does not dismiss on it and the face stays open. A field
outside the face, and an open floating layer (a select, a popover), keep the
key unmarked as before.

Claude-Session: https://claude.ai/code/session_01Utp6CaA9ZdTcj97mzGtHYt
Co-authored-by: Claude <noreply@anthropic.com>

Author: claude

ui/packages/plugin-detail/src/RecordPageColumns.tsx

@@ -84,29 +84,30 @@ function relatedNodeId(node: any): RelatedCardId | null {
 }
 
 /**
- * A panel's whole face, open in place (objectstack#27055, Target 9): under the
- * record header, at the page's full width, with ‹ to return. Esc returns too;
- * a dialog or menu open over the page keeps its own Esc.
- */
-/**
- * Whether an `Esc` belongs to something other than the open face: a field the
- * reader types in, an open menu or alert, or a dialog the face is not inside
- * (a popover, a confirm, a drawer opened over the page that holds the face).
- * The dialog that holds the face — the record pane's drawer — is not one.
+ * Whether an `Esc` belongs to a layer over the open face: an open menu, alert
+ * or floating content (a select, a tooltip), or a dialog the face is not
+ * inside (a popover, a confirm, a drawer opened over the page that holds the
+ * face). The dialog that holds the face — the record pane's drawer — is not one.
  */
-function escapeOwnedElsewhere(target: EventTarget | null, face: Element | null): boolean {
-  if (!face) return true;
-  if (
-    target instanceof Element &&
-    target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"]')
-  ) {
-    return true;
-  }
+function escapeOwnedByLayer(face: Element): boolean {
   const doc = face.ownerDocument;
-  if (doc.querySelector('[role="alertdialog"], [role="menu"]')) return true;
+  if (doc.querySelector('[role="alertdialog"], [role="menu"], [data-radix-popper-content-wrapper]')) return true;
   return Array.from(doc.querySelectorAll('[role="dialog"]')).some((dialog) => !dialog.contains(face));
 }
 
+function isTypingTarget(target: EventTarget | null): target is Element {
+  return (
+    target instanceof Element &&
+    !!target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"]')
+  );
+}
+
+/**
+ * A panel's whole face, open in place (objectstack#27055, Target 9): under the
+ * record header, at the page's full width, with ‹ to return. Esc returns too;
+ * a dialog or menu open over the page keeps its own Esc, and so does a field
+ * the reader types in.
+ */
 const EnlargedFace: React.FC<{ id: string; title: string; onClose?: () => void; children: React.ReactNode }> = ({
   id,
   title,
@@ -123,7 +124,15 @@ const EnlargedFace: React.FC<{ id: string; title: string; onClose?: () => void;
     // The face takes the key, and keeps it from the pane.
     const onKeyDown = (event: KeyboardEvent) => {
       if (event.key !== 'Escape' || event.defaultPrevented || event.isComposing) return;
-      if (escapeOwnedElsewhere(event.target, faceRef.current)) return;
+      const face = faceRef.current;
+      if (!face || escapeOwnedByLayer(face)) return;
+      if (isTypingTarget(event.target)) {
+        // A field keeps its own `Esc` (it closes a mention list, cancels an
+        // inline edit), so the key goes on to it; pressed in the face, it is
+        // marked handled, and the pane around the face stays open.
+        if (face.contains(event.target)) event.preventDefault();
+        return;
+      }
       event.preventDefault();
       event.stopPropagation();
       onClose();

ui/packages/plugin-detail/src/__tests__/RecordPageColumns.enlargedEscapeInPane-27524.test.tsx

@@ -127,11 +127,31 @@ describe('Esc on an open face inside the record pane (objectstack#27524)', () =>
     menu.remove();
   });
 
-  it('a text field owns Esc: the face stays open while the reader types in it', () => {
-    render(pane({}));
+  it('a text field in the face keeps its own Esc, and the drawer stays open around the face', () => {
+    const setIsOpen = vi.fn();
+    render(pane({ setIsOpen }));
     const input = document.createElement('input');
     face()!.appendChild(input);
+    const fieldEsc = vi.fn();
+    input.addEventListener('keydown', fieldEsc);
     escape(input);
+    // The key reaches the field (a mention list, an inline edit's cancel), and
+    // it is not the pane's: the face and the drawer stay.
+    expect(fieldEsc).toHaveBeenCalledTimes(1);
     expect(face()).not.toBeNull();
+    expect(setIsOpen).not.toHaveBeenCalled();
+    escape(face()!);
+    expect(face()).toBeNull();
+    expect(setIsOpen).not.toHaveBeenCalled();
+  });
+
+  it('a text field in the face, in the split pane beside a list: the face and the pane stay', () => {
+    const close = vi.fn();
+    render(pane({ mode: 'split', mainContent: <div>list</div>, close }));
+    const input = document.createElement('textarea');
+    face()!.appendChild(input);
+    escape(input);
+    expect(face()).not.toBeNull();
+    expect(close).not.toHaveBeenCalled();
   });
 });