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.

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

Building /warpcast and /farcaster

— gabrielayuso.com

Looked into the radix code.
onPointerUp is the handler that is used internally on selection.
I added an onPointUp with a console.log to the SelectItem. The logging works but the propagation isn't stopped even if I add e.stopPropagation() in there. 🤔

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.)

/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... 

😔

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