-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Open
Labels
issue/bug-unconfirmedIssues that describe a bug that hasn't been confirmed by a maintainer yetIssues that describe a bug that hasn't been confirmed by a maintainer yet
Description
Hi,
the current approach to touch event handling does not work well when <Select />
is used with a shadow root.
Reproduction
- Open Stackblitz: https://stackblitz.com/edit/stackblitz-starters-pandyv?file=src%2FApp.tsx
- The Select component works well using clicks (the Menu opens when clicking into the input)
- Open your browser's mobile device emulation (or use a touch device) and touch into the input field
- The menu does not open
Notes
- The menu actually opens internally, but it is hidden immediately because the
onTouchEnd
event handler categorizes the touch event as outside the select control (this results in ablurInput()
call) - When inside a shadow root, the event handler registered on the document will not observe the original
.target
, but the entire shadow dom. This is obviously not contained in the original node, which causes the behavior in this case. - A more stable alternative to
.contains(...)
is to useevent.composedPath()
instead. See also this blog post.
I've had trouble creating a unit test for this bug (I could not get touch events inside shadow DOM to work with jest). I hope that the sample above will be sufficient.
I think a fix would look as simple as replacing node.contains(event.target)
with event.composedPath().includes(node)
. I'll gladly create a PR for this.
Kind regards
vanlayo and SebiVPS
Metadata
Metadata
Assignees
Labels
issue/bug-unconfirmedIssues that describe a bug that hasn't been confirmed by a maintainer yetIssues that describe a bug that hasn't been confirmed by a maintainer yet