React: Chrome Autofill перезаписывает значения на контролируемых компонентах
Вы хотите запросить функцию или сообщить об ошибке ?
Сообщить об ошибке. Первоначально сообщается в https://github.com/mozilla-services/react-jsonschema-form/issues/1153
Каково текущее поведение?
Автозаполнение перезаписывает существующие значения в полях, когда эти поля являются контролируемыми компонентами в React.
См. Https://jsfiddle.net/epicfaace/9p17e2qx/21/ - чтобы проверить это, добавьте «Сохраненный адрес» в параметрах Chrome.
Какое поведение ожидается?
Автозаполнение не перезаписывает существующие поля. Я создал JSFiddle с простой формой HTML, которая работает с ожидаемым поведением.
См. Https://jsfiddle.net/epicfaace/1my3f9n4/6/
Какие версии React и какой браузер / ОС подвержены этой проблеме?
Реагировать 15.3.2
Хром 71.0.3578.98
epicfaace
Все 4 Комментарий
Кажется, что это вызвано, если свойство "значение" (например, какой хром кажется значением по умолчанию / заполнителем для поля) равно вставленному значению поля. Поэтому, когда реакция обновила опору значения при изменении состояния, мы технически меняем значение / заполнитель по умолчанию, чтобы оно соответствовало тому, что мы вводим. Таким образом, Chrome затем видит это как нетронутое поле и перезаписывает при автоматическом заполнении
Например. Введите строку в поле первого имени ... react обновит свойство value до введенного вами значения. Попробуйте автозаполнение электронной почты, и оно перезапишет поле имени.
Однако введите строку в поле имени, затем проверьте элемент и отредактируйте опору значения имени на строку, отличную от той, которую вы ввели, и попробуйте снова автозаполнение электронной почты ... на этот раз она не будет перезаписана .. .поскольку значение не совпадает со значением "по умолчанию".
Другой способ - onChange, обновить autocomplete = this.state.value. И хром распознает, что по какой-то причине это поле не заполняется автоматически. (autocomplete = off не работает ... это должна быть любая случайная строка) Если пусто и this.state.value пусто, то автозаполнение по-прежнему будет работать в поле, как ожидалось.
mabeabe28
24 янв. 2019
^^ Верно. Вот рабочий пример с использованием предложения onChange: https://jsfiddle.net/epicfaace/9p17e2qx/29/
epicfaace
25 янв. 2019
Очень интересно! Это побочный эффект синхронизации атрибута / свойства value на входах, о котором я не знал раньше (спасибо, @ mabeabe28):
Если атрибут value совпадает со свойством value, Chrome предполагает, что ввод «нетронутый», и заменит свойство value во время действия автозаполнения.
Интересно, верно ли это в других браузерах.
Я чувствую, что у нас должны быть проблемы с автозаполнением с отслеживанием ошибок, но я не уверен, что это задокументировано. Я также сделал суть, которая сравнивает нативный подход и подход React:
nhunzaker
28 янв. 2019
Если атрибут value совпадает со свойством value, Chrome предполагает, что ввод "нетронутый", и заменит свойство value во время действия автозаполнения.
Это может быть хотя бы частично решено с помощью # 13525 («Прекратить отображение входных значений в атрибуте значения»).
beheh
4 февр. 2019
Смежные вопросы
varghesep
·
3Комментарии
zpao
·
3Комментарии
zpao
·
3Комментарии
h1orz
·
3Комментарии
jmullo
·
3Комментарии
Самый полезный комментарий
Кажется, что это вызвано, если свойство "значение" (например, какой хром кажется значением по умолчанию / заполнителем для поля) равно вставленному значению поля. Поэтому, когда реакция обновила опору значения при изменении состояния, мы технически меняем значение / заполнитель по умолчанию, чтобы оно соответствовало тому, что мы вводим. Таким образом, Chrome затем видит это как нетронутое поле и перезаписывает при автоматическом заполнении
Например. Введите строку в поле первого имени ... react обновит свойство value до введенного вами значения. Попробуйте автозаполнение электронной почты, и оно перезапишет поле имени.
Однако введите строку в поле имени, затем проверьте элемент и отредактируйте опору значения имени на строку, отличную от той, которую вы ввели, и попробуйте снова автозаполнение электронной почты ... на этот раз она не будет перезаписана .. .поскольку значение не совпадает со значением "по умолчанию".
Другой способ - onChange, обновить autocomplete = this.state.value. И хром распознает, что по какой-то причине это поле не заполняется автоматически. (autocomplete = off не работает ... это должна быть любая случайная строка) Если пусто и this.state.value пусто, то автозаполнение по-прежнему будет работать в поле, как ожидалось.