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
- DeepCopy Object in JavaScript using immer
- POST https://localhost:5000/stored net::ERR_SSL_PROTOCOL_ERROR
- How to get data from React native FormData Object
- Wrapping app component with contextProvider component makes the webpage empty
- Cannot build frontend using Vite, TailwindCSS with PostCSS
- Is there a way to make Google wait until all data is loaded for my React website hosted on Firebase with a DB from Firebase before indexing?
- Cypress - Drag and drop not working on a react-based website
- ReactJS: React.render is not a function and React.createElement is not a function
- ERESOLVE unable to resolve dependency tree while installing a pacakge
- ReactJS <input type="date" > format date
- How to disable the Material UI Link API component
- Layout issues with <video> element
- Table data inside forms is not saving
- Where to put constants and types in a React Typescript project
- How to organize types definitions in a React project using Typescript
- STRUGGLING WITH NOTIFICATION COMPONENT
- How to update default value of MUI TextField?
- Tailwind margin and padding not applying
- Error: NativeViewGestureHandler must be used as a descendant of GestureHandlerRootView
- How to change active tab color in Material UI?
- Attempted import error: 'Wallet' is not exported from '@project-serum/anchor'
- React Input Validation Not Working in Form
- React router v6 doesn't support <Prompt /> or usePrompt
- Keycloak authentication with `react-oidc-context`: "No matching state found in storage" after page refresh
- How do you set the document title in React?
- Hiding my API key from being accessed directly
- TailwindCSS not working with Vite + React
- I18nManager.forceRTL doesn't applies changes in first app load
- How can I reduce excess space on the left in react-native-picker/picker?
- Real Time Speech-To-Text Application using socket-io