reactjsshadcnuiradix-ui

Does shadcn/ui SelectTrigger click event blocked when another SelectContent opening?


Like the tiltle said, I have two shadcn/ui Select components, when SelectContent2 opening then i click to SelectTrigger1 the content of of SelectContent1 doesn't show immediately. Does it contain any blocking stuff like preventDefault or stopPropagation? If it does, how can i fix that?enter image description here Thanks!


Solution

  • When a select is opened, it adds style="pointer-events: none" to the body which prevents you from interact with other elements

    One way to change its behavior is to override the style above by adding an important tailwind class !pointer-events-auto to the body.

    working playground: https://stackblitz.com/edit/stackblitz-starters-gl6ghw?description=The%20React%20framework%20for%20production&file=app%2Fpage.tsx,app%2Fglobals.css&title=Next.js%20Starter