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 ) { const { t } = useTranslation(); @@ -36,6 +37,18 @@ export const SearchInput = React.forwardRef(function SearchInput_( [onClick] ); + const handleKeyDown = React.useCallback( + (ev: React.KeyboardEvent) => { + if (ev.key === "Escape") { + ev.preventDefault(); + onEscape(); + return; + } + onKeyDown(ev); + }, + [onKeyDown, onEscape] + ); + return isMobile ? ( {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}