JedWatson / JedWatson/react-select

Enter key is not calling the onChange event on certain mobile devices

Open
#5,238 3 comments 0 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, 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:

  1. Navigate to https://react-select.com/home
  2. In the first select box on the page click the x to delete the entry "Ocean"
  3. Type in the box o, c and e.
  4. 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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.