Merge pull request #5 from FiligranHQ/combobox/3

Combobox/3
FiligranHQ · Jun 12, 2024 · c5dd140 · c5dd140
2 parents 5e35400 + 88ff5ca
commit c5dd140
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 19 deletions.
diff --git a/packages/filigran-ui/src/components/clients/combobox.tsx b/packages/filigran-ui/src/components/clients/combobox.tsx
@@ -21,16 +21,27 @@ interface ComboboxProps {
   order: string;
   placeholder: string;
   emptyCommand: string;
+  onValueChange: (value: string) => void;
+  defaultValue?: string;
 }
 
 function Combobox({
   dataTab,
   order,
   placeholder,
   emptyCommand,
+  onValueChange,
+  defaultValue = "",
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false);
-  const [value, setValue] = React.useState("");
+  const [value, setValue] = React.useState(defaultValue);
+
+  const handleSelect = (currentValue: string) => {
+    const newValue = currentValue === value ? "" : currentValue;
+    setValue(newValue);
+    setOpen(false);
+    onValueChange(newValue);
+  };
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -40,6 +51,7 @@ function Combobox({
           role="combobox"
           aria-expanded={open}
           className="w-[200px] justify-between"
+          onClick={() => setOpen(!open)}
         >
           {value ? dataTab.find((data) => data.value === value)?.label : order}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -55,10 +67,7 @@ function Combobox({
                 <CommandItem
                   key={data.value}
                   value={data.value}
-                  onSelect={(currentValue) => {
-                    setValue(currentValue === value ? "" : currentValue);
-                    setOpen(false);
-                  }}
+                  onSelect={() => handleSelect(data.value)}
                 >
                   <Check
                     className={cn(
@@ -77,4 +86,4 @@ function Combobox({
   );
 }
 
-export { Combobox };
+export {Combobox};
diff --git a/projects/filigran-website/components/example-combobox.tsx b/projects/filigran-website/components/example-combobox.tsx
@@ -3,21 +3,38 @@
 import * as React from 'react'
 
 import {Combobox} from 'filigran-ui/clients'
+import {Button} from 'filigran-ui'
 
 export function ExampleCombobox() {
+  const [selectedValue, setSelectedValue] = React.useState('')
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault()
+    console.log('Selected value:', selectedValue)
+  }
   return (
-    <Combobox
-      dataTab={[
-        {value: 'essai2', label: 'Essai2'},
-        {
-          value: 'eqsai1',
-          label: 'Eqsai1',
-        },
-        {value: 'eqai1', label: 'Eqai1'},
-      ]}
-      order={'essai1'}
-      placeholder={'placeholder'}
-      emptyCommand={'ya pas'}
-    />
+    <form onSubmit={handleSubmit}>
+      <Combobox
+        dataTab={[
+          {value: 'abcd', label: 'Abcd'},
+          {
+            value: 'acde',
+            label: 'Acde',
+          },
+          {value: 'acef', label: 'Acef'},
+        ]}
+        order={'Choose'}
+        placeholder={'Choose a value'}
+        emptyCommand={'Not found'}
+        onValueChange={(value) => setSelectedValue(value)}
+        defaultValue={'acde'}
+      />
+      <Button
+        className={'ml-2'}
+        variant={'default'}
+        type="submit">
+        Submit
+      </Button>
+    </form>
   )
 }