React input.focus () appelée par `ref` invoque également l'événement `onBlur`

Question

J'ai un élément d'entrée en React pour lequel je veux définir des rappels onFocus, onBlur, et ref. Le fait de définir le rappel ref entraîne un comportement non désiré où l'événement onBlur se déclenche lorsque j'utilise input.focus() à l'intérieur.

 {
        props.startSearch(); // définir props.active à true
    }}
    onBlur={() => {
        props.endSearch(); // définir props.active à false
    }}
    ref={(input) => {
        if (input && props.active) {
            input.focus();
        }
    }}
/>

J'ai un autre composant qui envoie une action pour définir props.active à true. Cela devrait mettre le focus sur le composant d'entrée. Cependant, lorsque le composant est monté, le rappel onBlur de l'entrée se déclenche de manière inattendue :

ref => onFocus => onBlur

Cela définit props.active à true, mais le redéfinit immédiatement à false (car props.endSearch se déclenche).

Lorsque je commente input.focus() et clique manuellement pour mettre le focus sur l'entrée, j'obtiens onFocus => ref, ce qui est le comportement désiré. Cependant, cela n'a clairement pas l'effet de "mise au point automatique" de l'entrée.

---

Pourquoi input.focus() déclenche-t-il onBlur et comment puis-je l'empêcher ?

Answer 1

Essayez d'utiliser autoFocus. Comme suit:

Éditer:

Aussi, dans votre componentDidUpdate, faites (notez la mise à jour de ref ci-dessus):

if (this.props.active) {
  this.refs.searchBox.focus();
}