feat(dropdown): fix the single/multiple selection controlled handling

adevinta · Jan 16, 2024 · 629cc8c · 629cc8c
1 parent 0d82474
commit 629cc8c
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 3 deletions.
diff --git a/packages/components/dropdown/src/Dropdown.doc.mdx b/packages/components/dropdown/src/Dropdown.doc.mdx
@@ -247,3 +247,7 @@ Apply `readOnly` to the wrapping `FormField` to indicate the dropdown is only re
 Set the `state` prop of the `FormField` to `error` to indicate that the dropdown is invalid. Optionally use the `FormField.ErrorMessage` to describe why the dropdown is invalid.
 
 <Canvas of={stories.FormFieldValidation} />
+
+### Test
+
+<Canvas of={stories.Test} />
diff --git a/packages/components/dropdown/src/Dropdown.stories.tsx b/packages/components/dropdown/src/Dropdown.stories.tsx
@@ -554,3 +554,46 @@ export const FormFieldValidation: StoryFn = () => {
     </div>
   )
 }
+
+const val = [
+  { value: '1', label: '1' },
+  { value: '2', label: '2' },
+  { value: '3', label: '3' },
+  { value: '4', label: '4' },
+  { value: '5', label: '5' },
+  { value: '6', label: '6' },
+  { value: '7', label: '7' },
+  { value: '8', label: '8' },
+  { value: '9', label: '9' },
+  { value: '10', label: '10' },
+  { value: '11', label: '11' },
+  { value: '12', label: '12' },
+  { value: '13', label: '13' },
+  { value: '14', label: '14' },
+  { value: '15', label: '15' },
+]
+
+const initialValue = ['1']
+
+export const Test: StoryFn = () => {
+  const [value, setValue] = useState(initialValue)
+
+  return (
+    <div className="p-xl">
+      <Dropdown multiple value={value} onValueChange={setValue}>
+        <Dropdown.Trigger>
+          <Dropdown.Value placeholder="hey" />
+        </Dropdown.Trigger>
+        <Dropdown.Popover>
+          <Dropdown.Items>
+            {val.map(({ value, label }) => (
+              <Dropdown.Item key={value} value={value}>
+                {label}
+              </Dropdown.Item>
+            ))}
+          </Dropdown.Items>
+        </Dropdown.Popover>
+      </Dropdown>
+    </div>
+  )
+}
diff --git a/packages/components/dropdown/src/useDropdown.ts b/packages/components/dropdown/src/useDropdown.ts
@@ -18,7 +18,7 @@ export interface DownshiftProps {
 }
 
 /**
- * This hooks abstract the complexity of using downshift with both single and multiple selection.
+ * This hook abstract the complexity of using downshift with both single and multiple selection.
  */
 export const useDropdown = ({
   itemsMap,
@@ -36,10 +36,14 @@ export const useDropdown = ({
 
   const downshiftMultipleSelection = useMultipleSelection<DropdownItem>({
     selectedItems: value
-      ? items.filter(item => (value as string[]).includes(item.value))
+      ? items.filter(item =>
+          multiple ? (value as string[]).includes(item.value) : value === item.value
+        )
       : undefined,
     initialSelectedItems: defaultValue
-      ? items.filter(item => (defaultValue as string[]).includes(item.value))
+      ? items.filter(item =>
+          multiple ? (defaultValue as string[]).includes(item.value) : defaultValue === item.value
+        )
       : undefined,
 
     onSelectedItemsChange: ({ selectedItems }) => {