Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

feat: hide command bar when losing focus (#7544)

Browse Source
This commit is contained in:
David Leek 2024-07-05 11:22:46 +02:00 committed by GitHub
parent cad8a3c2df
commit 51a2b3aa0e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -213,6 +213,16 @@ export const CommandBar = () => {
searchInputRef.current?.focus();
}
};
const onBlur = (evt: React.FocusEvent) => {
if (
evt.relatedTarget === null ||
!searchContainerRef.current?.contains(evt.relatedTarget)
) {
hideSuggestions();
}
};
return (
<StyledContainer ref={searchContainerRef} active={showSuggestions}>
<RecentlyVisitedRecorder />
@ -279,7 +289,10 @@ export const CommandBar = () => {
<ConditionallyRender
condition={Boolean(value) && showSuggestions}
show={
<CommandResultsPaper onKeyDownCapture={onKeyDown}>
<CommandResultsPaper
onKeyDownCapture={onKeyDown}
onBlur={onBlur}
>
{searchString !== undefined && (
<CommandSearchFeatures
searchString={searchString}
@ -309,7 +322,10 @@ export const CommandBar = () => {
}
elseShow={
showSuggestions && (
<CommandResultsPaper onKeyDownCapture={onKeyDown}>
<CommandResultsPaper
onKeyDownCapture={onKeyDown}
onBlur={onBlur}
>
<CommandQuickSuggestions
routes={allRoutes}
onClick={clearSearchValue}