title: react focus lose on contenteditable
body: <p>I wrote a custom content editable component, it looks like the below</p>
  
  <pre><code>export default class TextEditor extends React.Component {
  
  
  constructor(props) {
      super(props);
      this.ref = React.createRef();
  }
  
  
  onChange = (e) =&gt; {
      let value = e.target.innerHTML;
      this.props.onChange(value);
  }
  
  render() {
      const { enabled , onChange , style, className, value } = this.props;
      return (
          &lt;div&gt;
              &lt;div contentEditable={enabled}
                  dangerouslySetInnerHTML={{ __html: value }} 
                  ref={this.ref}
                  onInput={this.onChange}
                  style={{
                      ...style,
                      height: '80px',
                      overflow: 'auto',
                      cursor: enabled ? 'text' : 'inherit',
                  }}
                  className={`form-control form-control-sm ${className}`}
                  placeholder="Optional Notes..."
              /&gt;
          &lt;/div&gt;
      )
  }
  }
  </code></pre>
  
  <p>wherever i type something on the content editable the cursor moves to the beginning of the editable area. 
  it is because the this.props.onChange(value); updates the value outside and a rerender happening. How to prevent cursor reset on rerendering ??</p>