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.