JedWatson / JedWatson/react-select
Input loses focus when removing value unless menu is open, on safari for iOS
Open
issue/bug-confirmed
issue/has-pr
issue/reviewed
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
On mobile devices, whenever the menu is closed, removing an option from a MultiValue Select causes the input to lose focus. This makes you having to tap on the input field again after removing some values before you can start typing again.
Steps to replicate
- Navigate to the repro link using Safari on an iPhone.
- Add a few options
- Tap on the input and make sure it is focused
- Remove one option by tapping the "x" button next to it and notice how the input is still focused
- Remove another option and notice how the input no longer is focused.
React Select v3.0.4
React v16.8.6
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the focus loss in Safari on an iPhone using the linked CodeSandbox and the MultiValue Select steps. Review open pull request #3617 for the work already underway, then verify that removing successive options while the menu is closed keeps the input focused.
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
- 25/100