Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-18 00:19:49 +01:00
Code Issues Projects Releases Wiki Activity

feat: command bar results key down should exit/refocus input (#7509)

Browse Source 
Refocuses command bar input field if command bar results has focus and
user starts to type. Closes if Escape button clicked
This commit is contained in:
David Leek 2024-07-02 09:56:25 +02:00 committed by GitHub
parent be518af228
commit 85096ba3c6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/component/commandBar/CommandBar.tsx
View File

@ -194,13 +194,18 @@ export const CommandBar = () => {
}, },
); );
useKeyboardShortcut({ key: 'Escape' }, () => { useKeyboardShortcut({ key: 'Escape' }, () => {
if (searchContainerRef.current?.contains(document.activeElement)) { setShowSuggestions(false);
searchInputRef.current?.blur();
}
}); });
const placeholder = `Command bar (${hotkey})`; const placeholder = `Command bar (${hotkey})`;
useOnClickOutside([searchContainerRef], hideSuggestions); useOnClickOutside([searchContainerRef], hideSuggestions);
const onKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Escape') {
setShowSuggestions(false);
} else if (event.keyCode >= 48 && event.keyCode <= 110) {
searchInputRef.current?.focus();
}
};
return ( return (
<StyledContainer ref={searchContainerRef} active={showSuggestions}> <StyledContainer ref={searchContainerRef} active={showSuggestions}>
<RecentlyVisitedRecorder /> <RecentlyVisitedRecorder />
@ -252,7 +257,7 @@ export const CommandBar = () => {
<ConditionallyRender <ConditionallyRender
condition={Boolean(value) && showSuggestions} condition={Boolean(value) && showSuggestions}
show={ show={
<CommandResultsPaper> <CommandResultsPaper onKeyDownCapture={onKeyDown}>
{searchString !== undefined && ( {searchString !== undefined && (
<CommandFeatures <CommandFeatures
searchString={searchString} searchString={searchString}
@ -277,7 +282,7 @@ export const CommandBar = () => {
} }
elseShow={ elseShow={
showSuggestions && ( showSuggestions && (
<CommandResultsPaper> <CommandResultsPaper onKeyDownCapture={onKeyDown}>
<CommandRecent routes={allRoutes} /> <CommandRecent routes={allRoutes} />
<CommandPageSuggestions routes={allRoutes} /> <CommandPageSuggestions routes={allRoutes} />
</CommandResultsPaper> </CommandResultsPaper>