update search command

apps/admin.saladeaula.digital/app/routes/_.$orgid.enrollments.add/async-combobox.tsx

@@ -1,4 +1,4 @@
-import { useRequest, useToggle } from 'ahooks'
+import { useBoolean, useRequest, useToggle } from 'ahooks'
 import { CheckIcon, UserIcon, XIcon, AlertTriangleIcon } from 'lucide-react'
 import { formatCPF } from '@brazilian-utils/brazilian-utils'
 
@@ -29,18 +29,21 @@ import { Button } from '@repo/ui/components/ui/button'
 interface AsyncComboboxProps {
   value: any
   title: string
+  placeholder?: string
   onChange: (props: any) => void
   onSearch: (search: string) => Promise<any[]>
   error?: any
 }
 export function AsyncCombobox({
   title,
+  placeholder,
   value,
   onSearch,
   onChange,
   error
 }: AsyncComboboxProps) {
   const [open, { set }] = useToggle()
+  const [searched, { setTrue }] = useBoolean()
   const {
     data = [],
     loading,
@@ -48,7 +51,8 @@ export function AsyncCombobox({
   } = useRequest(onSearch, {
     manual: true,
     debounceWait: 300,
-    defaultParams: ['']
+    defaultParams: [''],
+    onSuccess: setTrue
   })
 
   return (
@@ -72,7 +76,7 @@ export function AsyncCombobox({
               <Button
                 variant="link"
                 size="icon-sm"
-                className="cursor-pointer text-black dark:text-white"
+                className="cursor-pointer text-muted-foreground"
                 onClick={(e) => {
                   e.preventDefault()
                   onChange?.(undefined)
@@ -93,66 +97,73 @@ export function AsyncCombobox({
       </PopoverTrigger>
 
       <PopoverContent className="lg:w-84 p-0" align="start">
-        <Command shouldFilter={false}>
+        <Command
+          shouldFilter={false}
+          className={cn(
+            !searched && '**:data-[slot=command-input-wrapper]:border-b-0'
+          )}
+        >
           <CommandInput
-            placeholder={title}
+            placeholder={placeholder}
             autoComplete="off"
             onValueChange={runAsync}
           />
 
-          <CommandList>
-            <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
+          {searched ? (
+            <CommandList>
+              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>
 
-            <CommandGroup>
-              {data.map(({ id, name, email, cpf }) => (
-                <CommandItem
-                  key={id}
-                  value={id}
-                  className="cursor-pointer"
-                  disabled={!cpf}
-                  onSelect={() => {
-                    onChange?.({ id, name, email, cpf })
-                    set(false)
-                  }}
-                >
-                  <div className="flex gap-2.5 items-start">
-                    <Avatar className="size-10 hidden lg:block">
-                      <AvatarFallback className="border">
-                        {initials(name)}
-                      </AvatarFallback>
-                    </Avatar>
+              <CommandGroup>
+                {data.map(({ id, name, email, cpf }) => (
+                  <CommandItem
+                    key={id}
+                    value={id}
+                    className="cursor-pointer"
+                    disabled={!cpf}
+                    onSelect={() => {
+                      onChange?.({ id, name, email, cpf })
+                      set(false)
+                    }}
+                  >
+                    <div className="flex gap-2.5 items-start">
+                      <Avatar className="size-10 hidden lg:block">
+                        <AvatarFallback className="border">
+                          {initials(name)}
+                        </AvatarFallback>
+                      </Avatar>
 
-                    <ul>
-                      <li className="font-bold">
-                        <Abbr>{name}</Abbr>
-                      </li>
-                      <li className="text-muted-foreground text-sm">
-                        <Abbr>{email}</Abbr>
-                      </li>
-
-                      {cpf ? (
+                      <ul>
+                        <li className="font-bold">
+                          <Abbr>{name}</Abbr>
+                        </li>
                         <li className="text-muted-foreground text-sm">
-                          {formatCPF(cpf)}
+                          <Abbr>{email}</Abbr>
                         </li>
-                      ) : (
-                        <li className="flex gap-1 items-center text-red-400">
-                          <AlertTriangleIcon className="text-red-400" />
-                          Inelegível
-                        </li>
-                      )}
-                    </ul>
-                  </div>
 
-                  <CheckIcon
-                    className={cn(
-                      'ml-auto',
-                      value?.id === id ? 'opacity-100' : 'opacity-0'
-                    )}
-                  />
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
+                        {cpf ? (
+                          <li className="text-muted-foreground text-sm">
+                            {formatCPF(cpf)}
+                          </li>
+                        ) : (
+                          <li className="flex gap-1 items-center text-red-400">
+                            <AlertTriangleIcon className="text-red-400" />
+                            Inelegível
+                          </li>
+                        )}
+                      </ul>
+                    </div>
+
+                    <CheckIcon
+                      className={cn(
+                        'ml-auto',
+                        value?.id === id ? 'opacity-100' : 'opacity-0'
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          ) : null}
         </Command>
       </PopoverContent>
     </Popover>