Frontend

In need of some FE help.

I'm using the Select component from shadcn (radix underneath).
When expanded, it renders above content on the page.
On mobile, when I tap on any select item after expanding it, the tap propagates to the content underneath it.

I tried prevent propagation with an onClick on the item and parent.

Radix UI comes with its own focus-trapping behavior so the usual event modifiers likely won’t work. Make sure the anatomy matches the example in the docs and check for unexpected stacking contexts in parents (`position: absolute`, `overflow`, etc.)

The open web is dead, long live the open web. ⌐◨-◨

Building /warpcast and /farcaster

— gabrielayuso.com

Radix UI comes with its own focus-trapping behavior so the usual event modifiers likely won’t work. Make sure the anatomy matches the example in the docs and check for unexpected stacking contexts in parents (`position: absolute`, `overflow`, etc.)

https://www.radix-ui.com/primitives/docs/components/select#anatomy

/frontend dev・founder/decentralized data wrangler /blockhead・ritual.net・UI/UX abstractionist・DeFi/web3 builder・dropout・24・prev /dydx・x.com/darryl__yeo

Thanks! I'm using shadcn so it is setting the anatomy which I double checked and matches the radix docs.

Also checked the parents and none have position set or overflow set... 

😔

Perhaps it’s something more obscure?

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context

Thx! 
I decided to switch to HTML <select> tag for now.
Already wasted too much time trying to figure it out and can do without it for now