React: Bug: Firefox: Pelengkapan Otomatis/IsiOtomatis masih tidak berfungsi

Dibuat pada 23 Mei 2020 · 3Komentar · Sumber: facebook/react

Deskripsi, langkah-langkah untuk mereproduksi dan contoh kotak pasir lihat #17022!
Fungsi pelengkapan otomatis asli dari firefox masih tidak berfungsi.

Ini juga memengaruhi kerangka kerja lain (antd, material UI):

Akan lebih baik jika seseorang dari komunitas reaksi dapat mencobanya karena menurut saya pelengkapan otomatis asli adalah fitur UX yang sangat penting.

Unconfirmed

Sumber

Hadsch

Komentar yang paling membantu

Saya telah memeriksa ini dan sepertinya ini terjadi karena React menyetel defaultValue dari simpul DOM input ke value untuk input yang dikontrol. Saat Anda mengirimkan sesuatu di Firefox di mana node.value === node.defaultValue tidak menyimpannya untuk pengisian otomatis. Itu tidak didokumentasikan di mana pun, saya baru saja menemukan pengujian (tanpa Bereaksi juga).

Menghapus masalah "" memecahkan "" ini:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

Alasan mengapa React menetapkan defaultValue ke value ini adalah karena jika Anda memiliki input dengan type="reset" dan Anda mengkliknya, Anda akan mendapatkan bidang kosong di kontrol Anda input jika Anda menghapus baris itu (perenderan ulang berikutnya akan memperbaikinya). Setidaknya itulah yang saya pahami dengan menelusuri kode.

Anda dapat membuat pelengkapan otomatis/isi otomatis berfungsi di Firefox pada input terkontrol dengan membuat defaultValue mengembalikan string kosong:

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

Ini berfungsi selama Anda tidak memiliki type="reset" . Jika tidak, Anda akan melihat bahwa semua bidang disetel ulang sebagai kosong (perenderan ulang berikutnya akan memperbaikinya). Saya tidak akan merekomendasikan ini, ini adalah "peretasan" dan saya belum pernah menggunakannya di mana pun untuk dapat mengatakan bahwa itu 100% dapat diandalkan.

Bagaimanapun, ini mungkin bug di Firefox .. atau fitur-(bug?) tapi saya belum menemukan apa pun di spesifikasi, MDN, atau di tempat lain yang menjelaskan mengapa node.value === node.defaultValue harus menyelamatkan tabungan untuk pengisian otomatis ️

Saya sedang/sedang mengerjakan PR untuk menyelesaikan ini .. tapi, mungkin Firefox bisa menyelesaikannya di pihak mereka? (tidak jelas apakah itu bug)
Akan sangat bagus untuk mengetahui jika ada orang dari tim inti React yang mengetahui masalah ini dan/atau apa yang dapat kami lakukan untuk mengatasinya.

Sunting: ini adalah demo yang menunjukkan masalah di Firefox. Ini HTML biasa + kode JS 3 baris:
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
Jadi ini bukan masalah React semata

eddyw pada 30 Mei 2020

👍3

Semua 3 komentar

Menghapus masalah "" memecahkan "" ini:
https://github.com/facebook/react/blob/1d85bb3ce13401644a5e345f8bc84522c59a951c/packages/react-dom/src/client/ReactDOMInput.js#L420

Anda dapat membuat pelengkapan otomatis/isi otomatis berfungsi di Firefox pada input terkontrol dengan membuat defaultValue mengembalikan string kosong:

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

Sunting: ini adalah demo yang menunjukkan masalah di Firefox. Ini HTML biasa + kode JS 3 baris:
https://codesandbox.io/s/naughty-feather-vwl6v?file=/index.html
Jadi ini bukan masalah React semata

eddyw pada 30 Mei 2020

👍3

Jika ada yang tertarik, saya membuka ini:
https://bugzilla.mozilla.org/show_bug.cgi?id=1642570
😅

eddyw pada 12 Jun 2020

Saya percaya ini adalah duplikat #15739