Content
@
0 reply
0 recast
0 reaction
Gabriel Ayuso ⌁
@gabrielayuso.eth
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.
7 replies
1 recast
10 reactions
Gabriel Ayuso ⌁
@gabrielayuso.eth
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. 🤔
0 reply
0 recast
1 reaction
Darryl Yeo 🛠️
@darrylyeo
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
1 reply
0 recast
1 reaction
Tyler Pashigian🎩
@tylerpashigian
Do you have a repo link? I’m also working with shadcn, I can take a look
0 reply
0 recast
0 reaction
Sam
@sam0
Try setting `pointerEvents` to none on the content beneath the select.
0 reply
0 recast
0 reaction
Mohin
@mohin
Try setting `pointer-events: none;` on the content below the select.
0 reply
0 recast
0 reaction
ghazishah
@ghazishah
nice
0 reply
0 recast
0 reaction
Vishal Soni
@vishalx
Gm
0 reply
0 recast
0 reaction
