filter options on search in combobox

Real-Dev-Squad · Sep 1, 2024 · 42e2641 · 42e2641
1 parent ad89d7e
commit 42e2641
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/src/components/combobox.tsx b/src/components/combobox.tsx
@@ -1,10 +1,13 @@
+import { useState } from "react"
+
 import {
     Combobox as BaseCombobox,
     ComboboxInput as BaseComboboxInput,
     ComboboxOption as BaseComboboxOption,
     ComboboxOptions as BaseComboboxOptions,
     Field,
 } from "@headlessui/react"
+import { CheckIcon } from "lucide-react"
 
 import { cn } from "@/utils/classname"
 import { inter } from "@/utils/fonts"
@@ -42,17 +45,27 @@ export const Combobox = <T,>({
     onInputChange,
     errorMessage,
 }: ComboboxProps<T>) => {
+    const [query, setQuery] = useState<string>("")
+    const filteredOptions = !query.length
+        ? options
+        : options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()))
+
+    const handleInputChange = (value: string) => {
+        setQuery(value)
+        onInputChange && onInputChange(value)
+    }
+
     return (
         <Field>
             {label && <Label>{label}</Label>}
 
-            <BaseCombobox value={value} onChange={onChange} immediate={immediate}>
+            <BaseCombobox value={value} onChange={onChange} immediate={immediate} onClose={() => setQuery("")}>
                 <BaseComboboxInput
                     aria-label={label}
                     placeholder={placeholder}
                     className="h-10 w-full rounded-lg border border-gray-200 px-4 outline-none ring ring-transparent transition focus:border-blue-400 focus:ring-blue-100"
                     displayValue={(option: TComboBoxOption<T>) => option?.label}
-                    onChange={(e) => onInputChange && onInputChange(e.currentTarget.value)}
+                    onChange={(e) => handleInputChange(e.currentTarget.value)}
                 />
 
                 <BaseComboboxOptions
@@ -63,12 +76,13 @@ export const Combobox = <T,>({
                         inter.variable
                     )}
                 >
-                    {options.map((option) => (
+                    {filteredOptions.map((option) => (
                         <BaseComboboxOption
                             key={String(option.value)}
                             value={option}
-                            className="px-4 py-2 data-[focus]:bg-blue-100"
+                            className="group flex items-center gap-2 px-4 py-2 data-[focus]:bg-blue-100"
                         >
+                            <CheckIcon className="invisible h-4 w-4 text-gray-500 group-data-[selected]:visible" />
                             {option.label}
                         </BaseComboboxOption>
                     ))}

diff --git a/src/modules/endorsements/create-endorsements/components/skill-list-combobox.tsx b/src/modules/endorsements/create-endorsements/components/skill-list-combobox.tsx
@@ -29,11 +29,7 @@ export const SkillListCombobox = ({ label, value, placeholder, errorMessage, onC
         queryFn: SkillsApi.getAllSkills,
     })
 
-    const options =
-        data?.map<TOption>((skill) => ({
-            value: skill.id,
-            label: skill.name,
-        })) ?? []
+    const options = data?.map<TOption>((skill) => ({ value: skill.id, label: skill.name })) ?? []
 
     const selectedOption = options.find((option) => option.value === value) ?? null