Cursor reset issue

Simple example of cursor position reseting

by Christian Micle

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class TestInput extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    const {
      onChange,
    } = this.props;

    onChange(event.target.value);
  }

  render() {
    let {
      value,
    } = this.props;
    
    value = value != null ? value : ''; 

    return <input value={value} onChange={this.handleChange} />
    ;
  }
}

class TestParent extends React.Component {
  constructor(props) {
    super(props);

		this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: null,
    };
  }

  handleChange(value) {      
    setTimeout(() => {
      this.setState({
 				value,
      });
    }, 1);
  }

  render() {
    const {
      value
    } = this.state;

    return <TestInput value={value} onChange={this.handleChange}/>;
  }
}

ReactDOM.render(
  <TestParent />,
  document.getElementById('container')
);