JedWatson / JedWatson/react-select
Enter key is not calling the onChange event on certain mobile devices
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
Hi, this issue was reported on our implementation of react-select, I have been able to reproduce it on the react-select homepage. Thanks
Bug Report
We have seen reports of this failing on our website on real phones. I have reproduced the issue seen on BrowserStack phones.
Steps to Replicate:
- Navigate to https://react-select.com/home
- In the first select box on the page click the x to delete the entry "Ocean"
- Type in the box o, c and e.
- Press enter.
Fails on the BrowserStack devices:
Google Pixel 6, Android 12, Google Chrome
Google Pixel 3a, Android 9, Google Chrome
One Plus 9, Android 11, Google Chrome
Motorola Moto G9, Android 10, Google Chrome
And the actual phone:
POCO F3, Android 12, Google Chrome
On the BrowserStack devices they all do nothing when the Enter key is pressed. On the POCO the next field is selected and nothing is selected in the first entry box.
Works fine on these BrowserStack devices, and selects "Ocean":
Samsung Galaxy 21, Android 12, Google Chrome
iPhone 13, iOs 15.0, Safari
Samsung Galaxy 10, Android 9, Google Chrome
Workaround
Where we are doing:
onChange={handleChange}
We are now doing:
onChange={handleChange}
onKeyDown={(event) => {
// On certain phones the enter key is not selecting the input text, so do it by hand.
if (event.key === 'Enter') {
const typeaheadOption = {
// ..
// create the typeahead option.
// ..
};
handleChange(typeaheadOption);
event.preventDefault();
}
}}
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 problem from the react-select homepage using the listed BrowserStack phones and the POCO F3. Trace the Enter-key path for the first select after typing a filtered option, and compare it with working devices. Done means Enter selects the option and calls onChange consistently on the affected devices.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100