Skip to content

Touch events do not work when <Select /> is mounted in a shadow root #5824

@mbeckem

Description

@mbeckem

Hi,

the current approach to touch event handling does not work well when <Select /> is used with a shadow root.

Reproduction

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 a blurInput() 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 use event.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

Metadata

Metadata

Assignees

No one assigned

    Labels

    issue/bug-unconfirmedIssues that describe a bug that hasn't been confirmed by a maintainer yet

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions