Send cursor to the end of input value in React

You can explicitly set cursor position, to do so add this to Input:

componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
        this.text.selectionStart = this.text.value.length;
        this.text.selectionEnd = this.text.value.length;
    }
}

To prevent removing last character add a e.preventDefault() after if(e.keyCode === 8 && hasTiles && tag === '' ) {

Edited Pen


Another simple solution:

<input ref={ref => ref && ref.focus()}
    onFocus={(e)=>e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)}
    />

ref triggers focus, and that triggers onFocus to calculate the end and set the cursor accordingly.