diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx b/packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx index 8737ad3a..41d87667 100644 --- a/packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx +++ b/packages/app-explorer/src/systems/Core/components/Search/SearchInput/SearchInput.tsx @@ -39,6 +39,8 @@ export function SearchInput({ const containerRef = useRef(null); const { pending } = useFormStatus(); const { dropdownRef } = useContext(SearchContext); + const timeoutRef = useRef(null); + const openDropdown = hasSubmitted ? !pending : isOpen && !pending && !!searchResult; @@ -66,14 +68,20 @@ export function SearchInput({ function handleClear() { setValue(''); close(); + inputRef.current?.focus(); } function handleFocus() { setIsFocused(true); + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } } function handleBlur() { - setIsFocused(false); + timeoutRef.current = setTimeout(() => { + setIsFocused(false); + }, 100); } function onKeyDown(e: KeyboardEvent) { @@ -112,36 +120,36 @@ export function SearchInput({ onBlur={handleBlur} onKeyDown={onKeyDown} > -
- - - - + - -
+ + + diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchInput/styles.ts b/packages/app-explorer/src/systems/Core/components/Search/SearchInput/styles.ts index 77b61b85..a0709017 100644 --- a/packages/app-explorer/src/systems/Core/components/Search/SearchInput/styles.ts +++ b/packages/app-explorer/src/systems/Core/components/Search/SearchInput/styles.ts @@ -22,7 +22,6 @@ export const styles = tv({ '[&_.rt-TextFieldChrome]:[&[data-opened=true]]:rounded-b-none', 'group-[&[data-active=true]]:[&_.rt-TextFieldChrome]:shadow-none', ], - inputActionsContainer: - '[&[data-show=false]]:hidden absolute flex items-center h-full right-0 top-0 transform', + inputActionsContainer: '[&[data-show=false]]:hidden', }, });