Can't type after clearing select on mobile devices

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]

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.

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