Fix plotly#2612: unexpected behaviour of the cursor

When inserting a non valid character in the middle of a pattern,
the cursor instantly jumps to the end of the word,
instead of staying in that position.

Author: rodasarede

components/dash-core-components/src/components/Input.react.js

@@ -184,16 +184,23 @@ export default class Input extends PureComponent {
 
     onChange() {
         const {debounce} = this.props;
-        if (debounce) {
-            if (Number.isFinite(debounce)) {
-                this.debounceEvent(debounce);
-            }
-            if (this.props.type !== 'number') {
-                this.setState({value: this.input.current.value});
+        const input = this.input.current;
+        const cursorPosition = input.selectionStart;
+        const currentValue = input.value;
+        this.setState({value: currentValue}, () => {
+            if (debounce) {
+                if (Number.isFinite(debounce)) {
+                    this.debounceEvent(debounce);
+                }
+                if (this.props.type !== 'number') {
+                    setTimeout(() => {
+                        input.setSelectionRange(cursorPosition, cursorPosition);
+                    }, 0);
+                }
+            } else {
+                this.onEvent();
             }
-        } else {
-            this.onEvent();
-        }
+        });
     }
 }