Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-10-14 20:06:41 +02: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' }, () => {
if (searchContainerRef.current?.contains(document.activeElement)) {
searchInputRef.current?.blur();
}
setShowSuggestions(false);
});
const placeholder = `Command bar (${hotkey})`;
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 (
<StyledContainer ref={searchContainerRef} active={showSuggestions}>
<RecentlyVisitedRecorder />
@ -252,7 +257,7 @@ export const CommandBar = () => {
<ConditionallyRender
condition={Boolean(value) && showSuggestions}
show={
<CommandResultsPaper>
<CommandResultsPaper onKeyDownCapture={onKeyDown}>
{searchString !== undefined && (
<CommandFeatures
searchString={searchString}
@ -277,7 +282,7 @@ export const CommandBar = () => {
}
elseShow={
showSuggestions && (
<CommandResultsPaper>
<CommandResultsPaper onKeyDownCapture={onKeyDown}>
<CommandRecent routes={allRoutes} />
<CommandPageSuggestions routes={allRoutes} />
</CommandResultsPaper>