title: React: How to maintain caret position when editing contentEditable div?
body: <p><strong>Currently</strong></p>
  
  <ol>
  <li>I have a react component that stores a <code>newValue</code> when the user clicks on a contentEditable <code>&lt;div&gt;</code>, and updates <code>newValue</code> as the user types. <em>Note: there are 2 main reasons why I have set up this behavior this way: (1) I do not want to send the data to be saved on every key stroke, and (2) I plan to use a variation of this div where each input is checked to verify whether the input is a number.</em></li>
  <li>The <code>newValue</code> is sent to be saved when the <code>&lt;div&gt;</code> loses focus, and then the state of the prop is reset.</li>
  </ol>
  
  <p><strong>Problem</strong></p>
  
  <p>The <code>onChangeHandler</code> is moving the position of the caret within the editable div to the left hand side. This results in the key strokes <code>123456</code> appearing as <code>654321</code></p>
  
  <p>Code:</p>
  
  
  
  <pre><code>class Input extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        //newValue input by user
        newValue : undefined
      }
    }
  
    //handler during key press / input
    onChangeHandler = event =&gt; {
      let targetValue =  event.currentTarget.textContent;
      this.setState({"newValue": targetValue})
    }
  
    //handler when user opens input form
    onBlurHandler = event =&gt; {
      //some code that sends the "newValue" to be saved, and resets state
    }
  
    render() {
      //determine which value to show in the div
      let showValue;
      //if there is a new value being input by user, show this value
      if (this.state.newValue !== undefined) {
        showValue = this.state.newValue;
      } else {
        //if prop has no value e.g. null or undefined, use "" placeholder
        if (this.props.value) {
          showValue = this.props.value;
        } else {
          showValue = "";
        }
      }
  
      return (
      &lt;table&gt;
      &lt;tbody&gt;
        &lt;td&gt;
            &lt;div
              contentEditable="true"
              suppressContentEditableWarning="true"
              onInput={this.onChangeHandler.bind(this)}
              onBlur={this.onBlurHandler}
            &gt;{showValue}
            &lt;/div&gt;
        &lt;/td&gt;
       &lt;/tbody&gt;
       &lt;/table&gt;
      )
    }
  }
  
  export default Input;
  </code></pre>
  
  
  
  <p><strong>Notes</strong></p>
  
  <ol>
  <li>I previously was doing this with a <code>&lt;textarea&gt;</code> which did not have this issue, but switched to <code>&lt;div&gt;</code> for more control over the auto-adjusting div height behavior (ref <a href="https://stackoverflow.com/questions/55811423/css-remove-scroll-bar-and-replace-with-variable-height-for-textarea-in-a-table">CSS: Remove scroll bar and replace with variable height for textarea in a table &lt;td&gt;</a>)</li>
  <li>I have been able to find numerous related answers, but none that are specific to react e.g. <a href="https://stackoverflow.com/questions/16194364/maintain-cursor-position-in-contenteditable-div">Maintain cursor position in contenteditable div</a>. I assume because react is reloading the component after each stroke, this issue is occurring.</li>
  <li>I previously had no ChangeHandler onInput, and this was working fine, but I was unable to log each key press and validate whether the character was a number.</li>
  </ol>