Positioning caret in contenteditable ReactJS components

I was able to get your example working with the methods described in these how-to-set-caretcursor-position-in-contenteditable-element-div, select-range-in-contenteditable-div. The same methods used there should probably work for you. You will most likely need to run this in the componentDidMount() method. Hope that helps. Here is a rough idea of what it would look like:

componentDidMount: function () {    var el = document.getElementById("a3");    var range = document.createRange();    var sel = window.getSelection();    range.setStart(el.childNodes[0], 1);    range.collapse(true);    sel.removeAllRanges();    sel.addRange(range);    el.childNodes[0].focus();  },

Edit: Seeing as your structure is quite nested you'll have to play around a bit with which nodes you are actually selecting to get the desired effect. The focus() call is needed to actually show the applied cursor position if the cursor is not already in the editable element.

In React 15.6.1 you can manually set caret position like that:

class CursorForm extends Component {  constructor(props) {    super(props);    this.state = {value: ''};  }  handleChange = event => {    // Custom set cursor on zero text position in input text field    event.target.selectionStart = 0     event.target.selectionEnd = 0    this.setState({value: event.target.value})  }  render () {    return (      <form>        <input type="text" value={this.state.value} onChange={this.handleChange} />      </form>    )    }}

You can get full control of cursor position by event.target.selectionStart and event.target.selectionEnd values without any access to real DOM tree.