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.

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