Блог

Рассмотрим следующий ввод текста и флажок:

 <div>
  <div className="field">
    <label htmlFor="name">Name: </label>
    <input
      id="name"
      type="text"
      onBlur={() => {
        console.log("onBlur");
        setTimeout(() => {
          console.log("onBlur next tick");
        });
      }}
    />
  </div>
  <div className="field">
    <input
      id="toggle"
      type="checkbox"
      onChange={() => {
        console.log("onChange");
      }}
    />
    <label htmlFor="toggle">Toggle</label>
  </div>
</div>
 

Пользователь выполняет следующее:

1. Основное внимание уделяется вводу имени
2. Щелкает / нажимает переключатель

В Chrome порядок символов console.log s равен:

 onBlur 
onBlur next tick 
onChange
 

Но при моделировании мобильных устройств порядок меняется на:

 onBlur 
onChange
onBlur next tick
 

Интересно, что в Firefox порядок не меняется при имитации мобильных устройств.

Почему это изменение порядка происходит в Chrome? Это где-нибудь задокументировано?

Codesandbox

Обновить:

Я только что воссоздал тот же пример на чистом JavaScript, и результат тот же: https://jsbin.com/vagoloxebi/edit?html ,js, вывод

Это означает, что проблема здесь не в реакции.

Это ошибка в Chrome?