Sendet den Cursor an das Ende des Eingabewerts in React

Question

Ich gebe dynamisch einen Wert an mein Eingabefeld, wenn ich auf Löschen klicke (um den letzten Eingabeeintrag zu bearbeiten).

Ich kann sehen, dass in Chrome sobald der Eingabewert gerendert wird der Cursor zeigt den Anfang des Wortes, während in Safari und Firefox am Ende des Wertes geht aber der letzte Buchstabe gelöscht wird.

Wie kann ich immer den Cursor am Ende sehen, ohne den letzten Buchstaben zu löschen (es sei denn, ich drücke zweimal auf Backspace)?

tagEvent(e) { 
    const tag = this.text.value; 
    const tagGroup = tag.split(" "); 
    const tiles = this.props.tiles; 
    const hasTiles = Object.keys(tiles).length > 0; 

    if(e.keyCode === 32 || e.keyCode === 13){ 
     e.preventDefault(); 
     tagGroup.map(tag => this.props.addTile(tag)); 
     this.tagForm.reset(); 
    } 

    if(e.keyCode === 8 && hasTiles && tag === '') { 
     this.props.editLastTile(); 
     this.tagForm.reset(); 
    } 
    } 

    render() { 
    return (
     <div className="input-wrapper"> 
     <form ref={(input) => this.tagForm = input}> 
      <input ref={(input) => this.text = input} 
       type="text" 
       name="new-item" 
       placeholder="type and press space" 
       autoComplete="off" 
       defaultValue={this.props.value} 
       onKeyDown={(e) => this.tagEvent(e)} /> 
     </form> 
     </div> 
    ) 
    } 

Here a Pen with the full code

Vielen Dank für die Hilfe!

Answer 1

Sie explizit Cursorposition gesetzt, dies zu tun, fügen Sie diese zu Input:

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

letzte Zeichen ein e.preventDefault() hinzufügen Entfernen zu verhindern, nachdem if(e.keyCode === 8 && hasTiles && tag === '') {

Herausgegeben Pen