shadcn-multi-select-component icon indicating copy to clipboard operation
shadcn-multi-select-component copied to clipboard

React 19 compatibility

Open anthony2261 opened this issue 7 months ago • 4 comments

Great component! Strange that it's not part of shadcn.

I added this to my project which uses React 19, tailwind v4, etc.. and had an issue: forwardRef is deprecated in React 19, you can just pass the ref as a prop now!

Here's what worked for me:

interface MultiSelectProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof multiSelectVariants> {
  // ...
  ref: React.RefObject<HTMLButtonElement>;
}


export const MultiSelect: React.FC<MultiSelectProps> = ({  // used FC type
  options,
  onValueChange,
  variant,
  defaultValue = [],
  placeholder = "Select options",
  animation = 0,
  maxCount = 3,
  modalPopover = false,
  asChild = false,
  className,
  ref,  // passed as a prop
  ...props
}) => {
  const [selectedValues, setSelectedValues] =
    React.useState<string[]>(defaultValue);
  // ...

anthony2261 avatar Mar 07 '25 14:03 anthony2261