X icons are not clickable bug

[ccaner37]

I just found out this component and it's really cool, thanks a lot! One thing missing was "X" buttons wasn't working, I was really confused but after some research I found the solution.
https://ui.shadcn.com/docs/components/button
There's a changelog at the bottom of the page which says
"2024-10-16 Classes for icons
Added gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 to the button to automatically style icon inside the button."
So yeah, "[&_svg]:pointer-events-none" this one is preventing from clicking to the "X" icons. So I added "[&_svg]:pointer-events-auto" to "Button" className, it's working same like in the demo website right now.
Pull Request: #30

[mtaeeeeee]

thanks bro @ccaner37, can confirm it works!

[evertonpavan]

I encountered the same issue when using the MultiSelect component inside a Dialog, where the "X" icons weren’t working properly, even with the modalPopover={true} option enabled.

After some investigation, I managed to fix the issue by adding the [&_svg]:pointer-events-auto class directly to the MultiSelect:

<MultiSelect modalPopover={true} className="[&_svg]:pointer-events-auto" {...props} />

This ensures that the "X" icons in the MultiSelect are clickable, even when placed inside a Dialog. I hope this solution helps others facing the same problem!

[sersavan]

I’ve added the "[&_svg]:pointer-events-auto" class to the component. Thanks a lot for the suggestion and detailed explanation! 🙌
Close this issue

[mohammadazeemwani]

Just tripped over the same issue, but the issue was persistant this is because the Badge Component does the same so we need to add "[&>svg]:pointer-events-auto", inside the Badge globally or in the place where it is used inside the MultiPlace component.

Pull request: #64