React input cursor position moves to the end?

user_247869 0
Viewed 3772

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"/>

reactjs
1 Answers

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}
    ...
  />
user_76686200
Related