JedWatson / JedWatson/react-select
Incorrect interaction of input value, keyboard focus, and already selected value
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Hi there, logging this issue against https://codesandbox.io/s/react-select-example-c3qvv, though AFAICT this is reproduce-able against any instance in the examples. It appears that when input entry is cleared back to empty using backspacing, the keyboard focus is not cleared, and so hitting enter after doing so causes the select instance to commit the last focused item.
Steps to reproduce:
Enter one in dropdown input
Select one
Click on dropdown input again
Enter two
Before hitting enter, backspace backspace backspace to remove "two" from the input
You see one, previously committed value, is displayed in dropdown input
Now hit enter
Expected result:
Nothing changes, previously committed value of one is retained.
Actual result:
two, or whatever the last focused menu item was, is selected.
Tyvm for the wonderful library!!
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
Reproduce the sequence in the linked CodeSandbox or the project examples, focusing on input clearing, keyboard focus, and the selected menu item. Trace the select input and focus-handling entry points, then verify that pressing Enter after backspacing to an empty input leaves the previously committed value unchanged and does not select the last focused item.
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