title: Send cursor to the end of input value in React
body: <p>I am dynamically passing a value to my input field when clicking delete (in order to edit the last input entry).</p>
  
  <p>I can see that in Chrome once the input value gets rendered the cursor shows up a the beginning of the word, while in Safari and Firefox goes at the end of the value but the last letter gets deleted.</p>
  
  <p>How can I always see the cursor at the end without deleting the last letter(unless I hit backspace twice)?</p>
  
  <pre><code>  tagEvent(e) {
      const tag = this.text.value;
      const tagGroup = tag.split(" ");
      const tiles = this.props.tiles;
      const hasTiles = Object.keys(tiles).length &gt; 0;
  
      if(e.keyCode === 32 || e.keyCode === 13){
        e.preventDefault();
        tagGroup.map(tag =&gt; this.props.addTile(tag));
        this.tagForm.reset();
      }
  
      if(e.keyCode === 8 &amp;&amp; hasTiles &amp;&amp; tag === '' ) {
        this.props.editLastTile();
        this.tagForm.reset();
      }
    }
  
    render() {
      return (
        &lt;div className="input-wrapper"&gt;
          &lt;form ref={(input) =&gt; this.tagForm = input}&gt;
            &lt;input ref={(input) =&gt; this.text = input}
                   type="text"
                   name="new-item"
                   placeholder="type and press space"
                   autoComplete="off"
                   defaultValue={this.props.value}
                   onKeyDown={(e) =&gt; this.tagEvent(e)} /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  </code></pre>
  
  <p><a href="https://codepen.io/fabioioio/pen/mmZZVo" rel="noreferrer">Here a Pen with the full code</a></p>
  
  <p>Thanks a lot for the help!</p>