L'attribut readonly html sur l'entrée ne change pas la première fois dans IE 11

Question

Je suis en train de mettre à jour la propriété readonly de la sortie lors du changement d'état du composant qui se produit dans le gestionnaire onFocus. Le code fonctionne bien sur Chrome et Firefox, mais sur IE 11, vous devez cliquer deux fois, puis commencer à écrire quelque chose à saisir. Comment le réparer? Je fait un exemple de mon code ici: https://codesandbox.io/s/94j1j8jnwy

UPD: trouvé presque problème similaire here

Answer 1

trouvé une réponse bien qu'il ressemble à un hack et il est un peu sale. La solution est de perdre le focus de l'entrée et de le renvoyer à nouveau. J'ai aussi utilisé ref pour input et setTimeout.

handleOnFocus() { 
    console.log('focused!'); 
    if (this.state.readOnly) { 
    this.setState({ readOnly: false },() => { 
     this.input.blur(); 
     setTimeout(() => this.input.focus(), 0); 
    }); 
    } 
} 

// ... 

<input 
    ... 
    ref={(input) => { this.input = input; }} /> 

code complet est sur codesandbox.io