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?
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
- How can I use Firebase's setPersistence() in a React project using Vite?
- How to get eslint to select jsx elements that have a className with a particular class?
- Loop inside React JSX
- Firebaseauth phone authentication Error (auth/invalid-app-credential) Reactjs
- How to use background with linear gradient in Tailwind css
- Dynamic routing and metadata generation in Next.js app router
- Using counter as an identifier for grandchildren in React
- React hooks: What/Why `useEffect`?
- MUI charts how to highlight a specific y-axis tick label?
- More advanced comparison in React's useEffect
- NextJS/React Type does not satisfy constraint
- 404 error on deploying Next.js app with GitHub Actions
- Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax
- NavLink in React JS not working as expected?
- Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks
- Not able to display material ui snackbar in center
- Uncaught TypeError: Cannot read properties of undefined (reading 'data') at Category i am getting this error please help me to solve it
- Variables not accessible on switch
- ReactJS frontend suddenly cannot resolve many of it's node modules
- Sticky headers, with react-tabs
- Issues connecting React hook form validated with zod, with Email Js
- 3d Terrain Generation using ThreeJs/React
- Logic to add vertical stepper lines
- Next.js api router throws 404
- Why does useEffect fire multiple times after adding functions in warnings from the exhaustive-deps linter?
- Formik - TypeError: Cannot read property 'type' of undefined?
- How to Make Material-UI Menu based on Hover, not Click
- react-testing-library why use test id
- Best way to pass props through multiple levels in React (Prop drilling)
- marker icon isn't showing in Leaflet