JedWatson / JedWatson/react-select

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

Open
#5,824 7 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

issue/bug-unconfirmed
Dominant language
TypeScript
Stars
28k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/react-select/src/Select.tsx at the onTouchEnd handler around line 1461, then reproduce the issue with the linked StackBlitz example using a Select mounted in a shadow root. Check the touch event's target handling and add or update coverage if feasible; done means touching the input opens the menu instead of immediately hiding it.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.