Improve item search open state

sandervspl · Jul 27, 2024 · de41b51 · de41b51
1 parent 19aa210
commit de41b51
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 5 deletions.
diff --git a/apps/website/src/components/common/item-search.tsx b/apps/website/src/components/common/item-search.tsx
@@ -20,7 +20,6 @@ type Props = {
   className?: string;
   onBlur?: () => void;
   searchItem?: (props: { item: SearchItem }) => React.ReactNode;
-  closeOnSelect?: boolean;
 };
 
 export type SearchItem = {
@@ -32,6 +31,7 @@ export type SearchItem = {
 };
 
 export const ItemSearch = React.forwardRef((props: Props, ref) => {
+  const [open, setOpen] = React.useState(false);
   const [selectedItem, setSelectedItem] = React.useState<number>();
   const [inputValue, setValue] = React.useState('');
   const [pending, startTransition] = React.useTransition();
@@ -53,13 +53,20 @@ export const ItemSearch = React.forwardRef((props: Props, ref) => {
     [],
   );
 
+  if (!pending && open && !inputValue) {
+    setOpen(false);
+  }
+
   return (
     <Combobox.Root
       items={searchQuery.data ?? []}
       selectionBehavior="clear"
       className={props.className}
-      closeOnSelect={props.closeOnSelect ?? false}
+      open={open}
+      closeOnSelect={false}
       onValueChange={(details) => {
+        setValue('');
+
         // If we have a custom item component we don't want to use the default action
         if (!props.searchItem) {
           const slug = details.value[0];
@@ -87,7 +94,12 @@ export const ItemSearch = React.forwardRef((props: Props, ref) => {
             ref={inputRef}
             autoFocus={props.autoFocus}
             onBlur={props.onBlur}
-            onChange={(e) => setValue(e.currentTarget.value)}
+            onChange={(e) => {
+              if (e.currentTarget.value.length > 0 && !open) {
+                setOpen(true);
+              }
+              setValue(e.currentTarget.value);
+            }}
           />
         </Combobox.Input>
       </Combobox.Control>

diff --git a/apps/website/src/components/modules/navbar.tsx b/apps/website/src/components/modules/navbar.tsx
@@ -26,7 +26,7 @@ export const Navbar = () => {
             <Image src={IconSvg} alt="logo" className="size-6" />
             <div className="hidden sm:block text-lg font-bold ">auctionoton</div>
           </Link>
-          <ItemSearch closeOnSelect />
+          <ItemSearch />
         </div>
 
         <div className="ml-auto self-center gap-2 hidden md:flex">

diff --git a/apps/website/src/components/modules/user/dashboard/section.tsx b/apps/website/src/components/modules/user/dashboard/section.tsx
@@ -82,7 +82,6 @@ export const DashboardSection = ({ section }: Props) => {
             // Component needs to always be mounted or else the results don't render
             className={cn({ 'sr-only': !isSearching, 'w-full': isSearching })}
             searchItem={(props) => <SearchItemComponent {...props} section={section} />}
-            closeOnSelect
           />
           {!isSearching && (
             <Button