react-select icon indicating copy to clipboard operation
react-select copied to clipboard

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

Open jamesh-uk-t opened this issue 3 years ago • 3 comments

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();
            }
        }}

jamesh-uk-t avatar Jun 21 '22 20:06 jamesh-uk-t

Hello @jamesh-uk-t,

is it possible to find out which version of Chrome the failed devices are using?

Rall3n avatar Jul 09 '22 14:07 Rall3n

Hi @Rall3n, thanks for looking at this

I checked BrowserStacks again and these all failed: Google Pixel 6, Android 12, Google Chrome 96.0.4664.104 Google Pixel 3a, Android 9, Google Chrome 100.0.4896.127 One Plus 9, Android 11, Google Chrome 100.0.4896.127 Motorola Moto G9, Android 10, Google Chrome 100.0.4896.127

Also I managed to get some more details from some devices. POCO F3, Android 12, Google Chrome version 103.0.5060.71 Google Pixel 4a, Android 12, Google Chrome 103.0.5060.71 Motorola Moto G4, Android 7, Google Chrome 102.0.5005.78

Those all failed.

jamesh-uk-t avatar Jul 12 '22 13:07 jamesh-uk-t

So from the comment above, chrome version are between verion 96.0.4664.104 and version 103.0.5060.71 for the version of the library. Is anyone facing any issue like this with current version at time of writing this comment ?

htech9 avatar Oct 02 '24 08:10 htech9