title: React contentEditable and cursor position
body: <p>I have simple component</p>
  <pre><code>class ContentEditable extends React.Component {
    constructor(props) {
      super(props);
      this.handleInput = this.handleInput.bind(this);
    }
  
    handleInput(event) {
      let html = event.target.innerHTML;
      if (this.props.onChange &amp;&amp; html !== this.lastHtml) {
        this.props.onChange({ target: { value: html, name: this.props.name } });
        this.lastHtml = html;
      }
    }
  
    render() {
      return (
        &lt;span
          contentEditable=&quot;true&quot;
          onInput={this.handleInput}
          className={&quot;auto &quot; + this.props.className}
          dangerouslySetInnerHTML={{ __html: this.props.value }}
        /&gt;
      );
    }
  }
  export default ContentEditable;
  
  &lt;ContentEditable
    value={this.state.name}
    onChange={e =&gt; {
      this.setState({ name: e.target.value });
    }}
  /&gt;;
  </code></pre>
  <p>The component works but the cursor position never changes, it is always  on first position instead after the rendered text.</p>
  <p>I tested examples form this forum but it doesn't work for me.</p>
  <p>I use <code>React 15.6.1</code> and test it on <code>chrome (Os X)</code>.</p>
  <p>Any hint how I can solve this problem?</p>