diff --git a/packages/app-explorer/src/systems/Core/components/Search/SearchInput.tsx b/packages/app-explorer/src/systems/Core/components/Search/SearchInput.tsx index eec0b20d..05288a2a 100644 --- a/packages/app-explorer/src/systems/Core/components/Search/SearchInput.tsx +++ b/packages/app-explorer/src/systems/Core/components/Search/SearchInput.tsx @@ -277,11 +277,14 @@ export function SearchInput({ const [value, setValue] = useState(initialValue as string); const [isFocused, setIsFocused] = useState(false); const [isOpen, setIsOpen] = useState(false); + const [hasSubmitted, setHasSubmitted] = useState(false); const inputRef = useRef(null); const containerRef = useRef(null); const { pending } = useFormStatus(); const { dropdownRef } = useContext(SearchContext); - const openDropdown = isOpen && !pending && !!searchResult; + const openDropdown = hasSubmitted + ? !pending + : isOpen && !pending && !!searchResult; function handleChange(event: React.ChangeEvent) { setValue(event.target.value); @@ -289,10 +292,12 @@ export function SearchInput({ function handleSubmit() { setIsOpen(true); + setHasSubmitted(true); } function close() { setIsOpen(false); + setHasSubmitted(false); } function handleClear() { @@ -308,6 +313,16 @@ export function SearchInput({ setIsFocused(false); } + function onKeyDown(e: KeyboardEvent) { + if (e.key === 'Enter') { + e.preventDefault(); + (e.target as HTMLFormElement).form?.dispatchEvent( + new Event('submit', { cancelable: true, bubbles: true }), + ); + handleSubmit(); + } + } + return (
-
+
) => { - if (e.key === 'Enter') { - e.preventDefault(); - (e.target as HTMLFormElement).form?.dispatchEvent( - new Event('submit', { cancelable: true, bubbles: true }), - ); - handleSubmit(); - } - }} + onKeyDown={onKeyDown} > - {(isFocused || !openDropdown) && !!value?.length ? ( - <> - - - - +
+ + - - - ) : ( - - + + - )} +
+ + + +
diff --git a/packages/app-explorer/src/systems/Core/components/Search/styles.ts b/packages/app-explorer/src/systems/Core/components/Search/styles.ts index e167a707..8f82f6cb 100644 --- a/packages/app-explorer/src/systems/Core/components/Search/styles.ts +++ b/packages/app-explorer/src/systems/Core/components/Search/styles.ts @@ -12,6 +12,7 @@ export const styles = tv({ '[&[data-active=true]]:z-50', ], dropdownItem: 'hover:bg-border focus:bg-border cursor-pointer', + inputContainer: 'w-full', inputWrapper: [ 'outline-none h-[40px] group-[&[data-active=true]]:h-[60px] tablet:group-[&[data-active=true]]:h-[40px]', 'group-[&[data-active=true]]:rounded-none tablet:group-[&[data-active=true]]:rounded-[var(--text-field-border-radius)] ', @@ -23,6 +24,8 @@ export const styles = tv({ 'group-[&[data-active=true]]:[&_.rt-TextFieldChrome]:shadow-none', ], searchSize: 'w-full sm:w-[400px] group-[&[data-active=true]]:w-full', + inputActionsContainer: + '[&[data-show=false]]:hidden absolute flex items-center h-full right-0 top-0 transform', dropdownContent: [ 'mt-[-10px] rounded-t-none shadow-none border border-t-0 border-border', '[&[data-active=true]]:border-t-0',