From 0055fcd20eb1ef3f7b562ddfd5f3bf5b8f67e2ae Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 5 Mar 2026 13:23:37 +0000
Subject: [PATCH] Fix: Escape in "Add or invite" field acts like back, not
 close popover

Co-authored-by: tommoor <380914+tommoor@users.noreply.github.com>
---
 .../Sharing/Collection/SharePopover.tsx       |  1 +
 .../Sharing/Document/SharePopover.tsx         |  1 +
 .../Sharing/components/SearchInput.tsx        | 19 ++++++++++++++++---
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/components/Sharing/Collection/SharePopover.tsx b/app/components/Sharing/Collection/SharePopover.tsx
index 836bce93be..748d8a5f95 100644
--- a/app/components/Sharing/Collection/SharePopover.tsx
+++ b/app/components/Sharing/Collection/SharePopover.tsx
@@ -344,6 +344,7 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
           onChange={handleQuery}
           onClick={showPicker}
           onKeyDown={handleKeyDown}
+          onEscape={hidePicker}
           query={query}
           back={backButton}
           action={rightButton}
diff --git a/app/components/Sharing/Document/SharePopover.tsx b/app/components/Sharing/Document/SharePopover.tsx
index 19142c27d2..08f6afb9a7 100644
--- a/app/components/Sharing/Document/SharePopover.tsx
+++ b/app/components/Sharing/Document/SharePopover.tsx
@@ -352,6 +352,7 @@ function SharePopover({ document, onRequestClose, visible }: Props) {
           onChange={handleQuery}
           onClick={showPicker}
           onKeyDown={handleKeyDown}
+          onEscape={hidePicker}
           query={query}
           back={backButton}
           action={rightButton}
diff --git a/app/components/Sharing/components/SearchInput.tsx b/app/components/Sharing/components/SearchInput.tsx
index c3b5f746ae..baddb6c38b 100644
--- a/app/components/Sharing/components/SearchInput.tsx
+++ b/app/components/Sharing/components/SearchInput.tsx
@@ -12,12 +12,13 @@ type Props = {
   onChange: React.ChangeEventHandler;
   onClick: React.MouseEventHandler;
   onKeyDown: React.KeyboardEventHandler;
+  onEscape: () => void;
   back: React.ReactNode;
   action: React.ReactNode;
 };
 
 export const SearchInput = React.forwardRef(function SearchInput_(
-  { onChange, onClick, onKeyDown, query, back, action }: Props,
+  { onChange, onClick, onKeyDown, onEscape, query, back, action }: Props,
   ref: React.Ref<HTMLInputElement>
 ) {
   const { t } = useTranslation();
@@ -36,6 +37,18 @@ export const SearchInput = React.forwardRef(function SearchInput_(
     [onClick]
   );
 
+  const handleKeyDown = React.useCallback(
+    (ev: React.KeyboardEvent<HTMLInputElement>) => {
+      if (ev.key === "Escape") {
+        ev.preventDefault();
+        onEscape();
+        return;
+      }
+      onKeyDown(ev);
+    },
+    [onKeyDown, onEscape]
+  );
+
   return isMobile ? (
     <Flex align="center" style={{ marginBottom: 12 }} auto>
       {back}
@@ -45,7 +58,7 @@ export const SearchInput = React.forwardRef(function SearchInput_(
         value={query}
         onChange={onChange}
         onClick={onClick}
-        onKeyDown={onKeyDown}
+        onKeyDown={handleKeyDown}
         autoFocus
         margin={0}
         flex
@@ -64,7 +77,7 @@ export const SearchInput = React.forwardRef(function SearchInput_(
           value={query}
           onChange={onChange}
           onClick={onClick}
-          onKeyDown={onKeyDown}
+          onKeyDown={handleKeyDown}
           style={{ padding: "6px 0" }}
         />
         {action}