React: Ошибка: Firefox: автозаполнение / автозаполнение все еще не работает

Созданный на 23 мая 2020 · 3Комментарии · Источник: facebook/react

Описание, шаги по воспроизведению и пример песочницы см. # 17022!
Встроенная функция автозаполнения из firefox по-прежнему не работает.

Это также влияет на другие фреймворки (antd, material UI):

Было бы неплохо, если бы кто-нибудь из сообщества React мог попробовать, потому что я думаю, что нативное автозаполнение - очень важная функция UX.

Unconfirmed

Источник

Hadsch

Самый полезный комментарий

Я изучил это, и, похоже, это происходит, потому что React устанавливает defaultValue входного узла DOM на текущий value для контролируемых входов. Когда вы отправляете что-то в Firefox, где node.value === node.defaultValue это не сохраняется для автозаполнения. Это нигде не задокументировано, я только что узнал о тестировании (тоже без React).

Удаление этого «решает» проблему:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

Причина, по которой React назначает defaultValue текущему value заключается в том, что если у вас есть ввод с type="reset" и вы щелкнете по нему, вы получите пустые поля в контролируемых вами input, если вы удалили эту строку (хотя следующая повторная визуализация исправит их). По крайней мере, это то, что я понимаю, просматривая код.

Вы можете заставить автозаполнение / автозаполнение работать в Firefox на контролируемом вводе, заставив defaultValue вернуть пустую строку:

  function handleChange(event) {
    Object.defineProperty(event.target, "defaultValue", {
      configurable: true,
      get() { return "" },
      set() {},
    });
    setValue(event.target.value);
  }

Это работает до тех пор, пока у вас нет type="reset" . В противном случае вы заметите, что все поля сброшены как пустые (хотя следующая повторная визуализация исправляет их). Я бы не рекомендовал это делать, это «взлом», и я нигде не использовал его, чтобы сказать, что он на 100% надежен.

В любом случае, это, вероятно, ошибка в Firefox ... или функция (ошибка?), Но я не нашел ничего в спецификациях, MDN или где-либо еще, что описывает, почему node.value === node.defaultValue следует отказаться от сохранения для автозаполнения 🤷‍♀️

Я работаю над PR, чтобы решить эту проблему ... но, может быть, Firefox сможет решить эту проблему на их стороне? 🙈 (неясно, ошибка ли это)
Было бы здорово узнать, знает ли кто-нибудь из основной команды React о проблеме и / или о том, что мы можем с этим сделать.

Изменить: это демонстрация, демонстрирующая проблему в Firefox. Это простой HTML + 3-строчный JS-код:
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
Так что это не проблема React как таковая 🤔

eddyw 30 мая 2020

👍3

Все 3 Комментарий

Удаление этого «решает» проблему:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

  function handleChange(event) {
    Object.defineProperty(event.target, "defaultValue", {
      configurable: true,
      get() { return "" },
      set() {},
    });
    setValue(event.target.value);
  }