primitives
primitives copied to clipboard
radix-ui
fix(select): select click event passthrough underneath
close #1658
Description
The select component has this behaviour when using mobile browsers, or in Chrome mobile simulator. The tapping of an item to select will close the select content wrapper and then trigger onClick event of the element underneath the select content wrapper.
I have experimented it in the storybook as shown in following screenshot:
As seen from screenshot, I put a button covering the entire view underneath the select component, in the second GIF recording, we can see that the button underneath is clicked when we try to tap to select an item (reflected by the increasing of the counter value).
Hypothesis
In the original handleSelect event listener when an item is selected, the context.onOpenChange(false) was called before the onClick event was triggered. This is because the handleSelect event listener is listening to the onPointerUp event, which will be fired first before onClick event gets fired. Therefore, this results in our select content wrapper being closed before onClick event is fired, causing the onClick event to pass through to the component underneath.
Solution
My proposed solution in this PR is to make sure that onClick event is captured by the select item before the onOpenChange(false) is called which closes the select content wrapper. This can be done by set up two states, one will get updated when onClick on the select item is captured, the other will be updated when onPointerUp on the select item is captured.
Then we just listen to the two states with a useEffect that will handle the effects caused by the changing two states. Once we get both states to be true, basically means our select item has both onPointerUp and onClick event received, then we can safely call onOpenChange(false) to close the select content wrapper.
Result
The result is the onClick event no longer pass through to the component below, as shown in below GIF image:
Unit Test ✅
why hasn't this been merged already
still waiting for two more approval. 🙏🏻🙏🏻
Hey. Not to be a random commenter on an open source project demanding my issue get fixed, but is there any chance this could get reviewed and merged in? There's a number of issues filed for this bug and it seems that the issue is fairly well understood and a fix is right here.
@benoitgrelard the issue is still relevant, any help with reviewing the fix ? 🙏
Maybe we'll get to celebrate the anniversary of this PR 🥳
5 more months to go 🥲
Hi, we are facing this exact issue when using the Select component inside a Drawer. Is there an update on this ?
Hi @andy-hook @benoitgrelard , may I kindly ask for your reviews and approval to run the checks whenever you are free please? Thank you so much! 🙏🏻
Hi, @andy-hook @benoitgrelard, Could you kindly check this PR? Many people including me are waiting for this merge. Thank you very much 🙇
Sorry this has taken awhile. Adding to my backlog for some manual testing and then I'll merge ASAP. Locked conversation because "fix my issue" and "+1" comments are not helpful.
