React 19 compatibility

[anthony2261]

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]

Not exactly working actually, can't click on X

[Almopt]

I'm having the same issue, can't click on the (X) button.

[DeathHunterX]

I found a way to prevent can't click on the (X) button that you need to wrap the XCircle icon by span element with button role

<Badge
    key={value}
    className={cn(
        isAnimating
            ? "animate-bounce z-10"
            : "",
        multiSelectVariants({
            variant,
        })
    )}
    style={{
        animationDuration: `${animation}s`,
    }}
>
    {IconComponent && (
        <IconComponent className="h-4 w-4 mr-2" />
    )}
    {option?.label}
    <span // Replace <button> with <span>
        role="button"
        className="ml-2 h-4 w-4 cursor-pointer hover:bg-white"
        onKeyDown={(event) => {
            if (
                event.key ===
                "Enter"
            ) {
                toggleOption(value);
            }
        }}
        onMouseDown={(event) => {
            event.preventDefault();
            event.stopPropagation();
        }}
        onClick={(event) => {
            toggleOption(value);
        }}
    >
        <XCircle />
    </span>
</Badge>

[arrizkyhp]

I found a way to prevent can't click on the (X) button that you need to wrap the XCircle icon by span element with button role

thanks it's work for me