React-select: Can't type after clearing select on mobile devices

[amireynoso]

Problem

User can't type after clearing a select on mobile devices.

We managed to reproduce this on mobile devices only (not even simulating a device). So far, we tested this on iOS, both Chrome and Safari.

We noticed this in our app first and also managed to reproduce in the react-select demo website and on CodeSandbox (see steps below).

Steps to reproduce

• Go to this sandbox on a mobile device: https://mo7m8yk9qx.codesandbox.io/
  (code is in https://codesandbox.io/s/mo7m8yk9qx)
• Clear the field using the x on the right
• Try typing on the field
• Verify the keys are not entered
  
  
  
  • Notice that the cursor does not show up when typing doesn't work (see screen captures)
  
  

Screen captures

From the Sandbox link

https://youtu.be/nBLZDUqcivs

From the documentation site

https://youtu.be/fdN97WsWNkE

[simonflk]

I'm having the same problem. Seems that if I focus another field, and then re-focus the cleared select, it works ok.

document.activeElement looks the same in both cases, so it looks like it's focusing the right input. If I figure out a fix or workaround, I'll update this issue.

[simonflk]

Well, I did a little investigation, and I have a workaround which meets my needs. I would like to understand more of what's going wrong and fix it properly, but I don't have a Mac I can use for debugging and I can't get browserstack to load sourcemaps for some reason. Despite what you said @amireynoso, about only seeing this on actual devices, I am seeing this on browserstack also (which afaiu uses the Xcode iOS simulator).

You can check out my workaround here...
sandbox: https://23k27kk8p.codesandbox.io/
code: https://codesandbox.io/s/23k27kk8p

Essentially it boils down to watching for a change with an empty value, and manually focusing the select.

This is a diff from the original sandbox with the key changes:

--- /home/simon/tmp/example.js.orig     2019-05-15 10:04:44.220625289 +0200
+++ /home/simon/tmp/example.js.forked   2019-05-15 10:08:08.693652368 +0200
@@ -3,9 +3,17 @@
 import { colourOptions } from "./docs/data";

 export default class SingleSelect extends Component<*, State> {
+  handleChange = change => {
+    if (!change && this.selectRef) {
+      this.selectRef.focus();
+    }
+  }
+
   render() {
     return (
       <Select
+        ref={select => this.selectRef = select}
+        onChange={this.handleChange}
         className="basic-single"
         classNamePrefix="select"
         defaultValue={colourOptions[0]}

As far as my investigation went, I found quite easily where the event handlers are added to the <ClearIndicator/> component:
https://github.com/JedWatson/react-select/blob/b37edfd3c71d37a41baf0d770031c26c92813e7c/src/Select.js#L1539-L1551

we should be hitting that touchend event handler on iOS, which delegates to the mousedown event handler as seen here:
https://github.com/JedWatson/react-select/blob/b37edfd3c71d37a41baf0d770031c26c92813e7c/src/Select.js#L1060-L1064

and in that event handler, we see that the input is cleared, event propagation is stopped, and the input should be focused on the next frame:
https://github.com/JedWatson/react-select/blob/b37edfd3c71d37a41baf0d770031c26c92813e7c/src/Select.js#L941-L950

As I said yesterday, it appears that the input is being focused, as document.activeElement is set to the input even when typing is disabled. And unless browserstack is lying to me, it looks like the input is not disabled or readonly.

At first I thought it might be a controlled input with a missing/broken onChange/onKeyDown event handler. But I _think_ that in those cases you would still see a caret. But I don't think that happens here.

Maybe @JedWatson or other maintainers (?) can shed some light.

[lvl99]

We're getting the same issue. It's easily reproducable using iOS simulator with a clearable select.

@simonflk I attempted your workaround as well (adapted to hooks) and still wasn't able to make the input focused, sadly.

[harish-everest]

Having the same issue, checked on actual iOS devices(both Chrome and Safari). Tried the above solutions and different other solutions nothing worked.

[lvl99]

@harish-everest I've recently upgraded to react-select@^3.0.0 but I haven't tested this particular bug yet. Will let you know in the next few days — unless you're already using v3 and can confirm the bug still exists?

[harish-everest]

@lvl99 I'm using the react-select@^3.0.0 the bug still exists.

[megos]

Try use with openMenuOnFocus option?
Keyboard is working after clearing.