React input cursor position moves to the end? - reactjs

Question

I came across with this scenario where I want to "sanitize" the input before calling onChange, however even without re-render, the cursor moves to the end. why?
class Input extends React.Component {
state = { value: this.props.value };
onChange = e => {
let nextValue = e.target.value;
if (!/[0-9]/.test(nextValue)) {
this.setState({ value: nextValue });
}
};
render() {
console.log("render");
return (
<input type="text" value={this.state.value} onChange={this.onChange} />
);
}
}
ReactDOM.render(<Input value="type something here" />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

Answer 1

You can use onKeyPress to sanitize an input before onChange, without "side effects".
Code Sandbox: https://codesandbox.io/s/9jlm59n52r
import React from "react";
import ReactDOM from "react-dom";
class Input extends React.Component {
state = { value: this.props.value };
handleKeyPress = e => {
let keyPressed = e.key;
if (/[0-9]/.test(keyPressed)) {
e.preventDefault();
}
};
handleChange = e => {
this.setState({ value: e.target.value });
};
render() {
return (
<input
type="text"
value={this.state.value}
onKeyPress={this.handleKeyPress}
onChange={this.handleChange}
/>
);
}
}
ReactDOM.render(
<Input value="type something here" />,
document.getElementById("root")
);
EDIT:
Sanitize input on paste:
handlePaste = e => {
let pastedText = e.clipboardData.getData("text/plain");
if (/[0-9]/.test(pastedText)) {
e.preventDefault();
}
}
...
<input
...
onPaste={this.handlePaste}
...
/>