Fix Dropdown Multiple

thebbodek · Jun 17, 2024 · a25da7d · a25da7d
1 parent 3ed3428
commit a25da7d
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 28 deletions.
diff --git a/src/core/components/Dropdown/DropdownMultiple/DropdownMultiple.stories.tsx b/src/core/components/Dropdown/DropdownMultiple/DropdownMultiple.stories.tsx
@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import { MouseEvent, useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 
 import DropdownMultiple from './index';
 import {
@@ -32,20 +32,22 @@ export const Default = () => {
 
   const items = data.map((item, idx) => {
     const { value, label } = item;
-    const checked = currentValues.some((item) => item.value === value);
+    const isChecked = currentValues.some(({ value: v }) => v === value);
 
     return (
       <DropdownMultiple.Item
         key={idx}
-        checked={checked}
-        onClick={(e: MouseEvent<HTMLLIElement>) => {
+        checked={isChecked}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
           e.stopPropagation();
 
-          if (!checked) {
+          const { checked } = e.target;
+
+          if (checked) {
             setCurrentValues((prev) => [...prev, item]);
           } else {
             setCurrentValues((prev) =>
-              prev.filter((prevItem) => prevItem !== item),
+              prev.filter((prevItem) => prevItem.value !== item.value),
             );
           }
         }}

diff --git a/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleItem.tsx b/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleItem.tsx
@@ -1,33 +1,53 @@
 import clsx from 'clsx';
-import { forwardRef, Ref } from 'react';
+import { ComponentPropsWithRef, forwardRef, useId } from 'react';
 import { Check } from '@phosphor-icons/react';
 
-import { DropdownSelectItemProps } from '@/core/components/Dropdown/DropdownSelect/types';
+import { DropdownMultipleItemProps } from '@/core/components/Dropdown/DropdownMultiple/types';
 
 const DropdownMultipleItem = forwardRef(
   (
-    { className, children, checked, ...props }: DropdownSelectItemProps,
-    ref: Ref<HTMLLIElement>,
+    {
+      className,
+      children,
+      checked,
+      disabled,
+      readOnly,
+      ...props
+    }: DropdownMultipleItemProps,
+    ref: ComponentPropsWithRef<'input'>['ref'],
   ) => {
+    const id = useId();
+    const isDisabled = disabled || readOnly;
+
     return (
-      <li
-        ref={ref}
-        role='option'
-        className={clsx(
-          'flex cursor-pointer items-center justify-between text-body-01-regular text-gray-08 hover:font-bold',
-          checked && 'font-bold',
-          className,
-        )}
-        {...props}
-      >
-        {children}
-        <Check
-          weight='bold'
+      <li role='option'>
+        <label
+          htmlFor={id}
           className={clsx(
-            '-mt-[2px] flex-shrink-0 text-gray-03',
-            checked && 'text-primary-03',
+            'flex items-center justify-between text-body-01-regular text-gray-08 hover:font-bold',
+            checked && 'font-bold',
+            isDisabled ? 'cursor-not-allowed' : 'cursor-pointer',
+            className,
           )}
-        />
+        >
+          {children}
+          <input
+            ref={ref}
+            id={id}
+            checked={checked}
+            type='checkbox'
+            className='peer hidden'
+            disabled={disabled}
+            readOnly={readOnly}
+            {...props}
+          />
+          <Check
+            weight='bold'
+            className={clsx(
+              '-mt-[2px] flex-shrink-0 text-gray-03 peer-checked:text-primary-03',
+            )}
+          />
+        </label>
       </li>
     );
   },

diff --git a/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleTrigger.tsx b/src/core/components/Dropdown/DropdownMultiple/DropdownMultipleTrigger.tsx
@@ -58,7 +58,11 @@ const DropdownMultipleTrigger = forwardRef(
           <Typography
             theme='subhead-02-regular'
             color={!showPlaceholder && !isDisabled ? 'gray-08' : 'gray-05'}
-            text={!showPlaceholder ? currentValues.join(', ') : placeholder}
+            text={
+              !showPlaceholder
+                ? currentValues.map((value) => value.label).join(', ')
+                : placeholder
+            }
             className={clsx(
               'flex-1 truncate text-start',
               isDisabled && 'mr-[1.75rem]',

diff --git a/src/core/components/Dropdown/DropdownMultiple/types/index.ts b/src/core/components/Dropdown/DropdownMultiple/types/index.ts
@@ -1,4 +1,9 @@
-import { HTMLAttributes, MouseEvent, ReactElement } from 'react';
+import {
+  HTMLAttributes,
+  InputHTMLAttributes,
+  MouseEvent,
+  ReactElement,
+} from 'react';
 
 import { DropdownProps } from '@/core/components/Dropdown/DropdownBase/types';
 import DropdownSelectItems from '@/core/components/Dropdown/DropdownSelect/DropdownSelectItems';
@@ -24,6 +29,9 @@ export interface DropdownMultipleTriggerProps<T extends ValueWithLabelType>
   onDelete?: (value: T) => void;
 }
 
+export interface DropdownMultipleItemProps
+  extends InputHTMLAttributes<HTMLInputElement> {}
+
 type DropdownMultiple = (props: DropdownProps) => ReactElement;
 
 export type ReturnType = DropdownMultiple & {