React: IsiOtomatis Chrome menimpa nilai pada komponen yang dikontrol
Apakah Anda ingin meminta fitur atau melaporkan bug ?
Laporkan bug. Awalnya dilaporkan di https://github.com/mozilla-services/react-jsonschema-form/issues/1153
Bagaimana perilaku saat ini?
IsiOtomatis menimpa nilai yang ada di bidang ketika bidang tersebut dikendalikan komponen di React.
Lihat https://jsfiddle.net/epicfaace/9p17e2qx/21/ - untuk mengujinya, tambahkan "Alamat Tersimpan" di opsi Chrome.
Apa perilaku yang diharapkan?
IsiOtomatis tidak menimpa bidang yang ada. Saya telah membuat JSFiddle dengan bentuk HTML biasa, yang berfungsi dengan perilaku yang diharapkan.
Lihat https://jsfiddle.net/epicfaace/1my3f9n4/6/
Versi React mana, dan browser / OS mana yang terpengaruh oleh masalah ini?
Bereaksi 15.3.2
Chrome 71.0.3578.98
epicfaace
Semua 4 komentar
Tampaknya disebabkan jika "nilai" prop (mis yang tampaknya dilihat chrome sebagai nilai / placeholder default untuk bidang) sama dengan nilai bidang yang disisipkan. Jadi ketika bereaksi memperbarui nilai prop pada perubahan status, kami secara teknis mengubah nilai default / placeholder agar sesuai dengan apa pun yang kami ketik. Jadi, chrome kemudian melihat ini sebagai bidang yang tidak tersentuh, dan akan menimpa pada pengisian otomatis
Sebagai contoh. Ketik string di bidang nama depan ... react akan memperbarui prop nilai menjadi apa pun yang Anda ketikkan. Coba IsiOtomatis email dan itu akan menimpa bidang nama depan.
Namun, ketik string di bidang nama depan, lalu periksa elemen dan edit prop nilai nama depan ke string selain yang Anda ketikkan, dan coba isi otomatis email lagi ... kali ini tidak akan menimpa .. .karena nilainya tidak sama dengan nilai "default".
Cara lain adalah onChange, perbarui autocomplete = this.state.value. Dan Chrome akan mengenali untuk tidak melengkapi bidang ini secara otomatis karena beberapa alasan. (autocomplete = off tidak berfungsi ... itu harus berupa string acak apa pun) Jika kosong dan this.state.value kosong, maka pengisian otomatis akan tetap berfungsi di bidang seperti yang diharapkan.
mabeabe28
pada 24 Jan 2019
^^ Benar. Berikut adalah contoh yang berfungsi menggunakan saran onChange: https://jsfiddle.net/epicfaace/9p17e2qx/29/
epicfaace
pada 25 Jan 2019
Sangat menarik! Ini adalah efek samping dari sinkronisasi atribut nilai / properti pada input yang tidak saya sadari sebelumnya (terima kasih, @ mabeabe28):
Jika atribut nilai sama dengan properti nilai, Chrome menganggap masukan "tidak tersentuh", dan akan mengganti properti nilai selama tindakan IsiOtomatis
Saya ingin tahu apakah ini benar di browser lain.
Saya merasa kami pasti memiliki masalah pengisian otomatis pelacakan bug, tetapi saya tidak yakin apakah ada di antara mereka yang mendokumentasikannya. Saya juga membuat intisari yang membandingkan pendekatan native dan React:
nhunzaker
pada 28 Jan 2019
Jika atribut nilai sama dengan properti nilai, Chrome menganggap masukan "tidak tersentuh", dan akan mengganti properti nilai selama tindakan IsiOtomatis
Ini mungkin setidaknya sebagian diselesaikan dengan # 13525 ("Berhenti mencerminkan nilai masukan dalam atribut nilai").
beheh
pada 4 Feb 2019
Masalah terkait
trusktr
·
3Komentar
h1orz
·
3Komentar
DimitarChristoff
·
3Komentar
kocokolo
·
3Komentar
tleunen
·
3Komentar
Komentar yang paling membantu
Tampaknya disebabkan jika "nilai" prop (mis yang tampaknya dilihat chrome sebagai nilai / placeholder default untuk bidang) sama dengan nilai bidang yang disisipkan. Jadi ketika bereaksi memperbarui nilai prop pada perubahan status, kami secara teknis mengubah nilai default / placeholder agar sesuai dengan apa pun yang kami ketik. Jadi, chrome kemudian melihat ini sebagai bidang yang tidak tersentuh, dan akan menimpa pada pengisian otomatis
Sebagai contoh. Ketik string di bidang nama depan ... react akan memperbarui prop nilai menjadi apa pun yang Anda ketikkan. Coba IsiOtomatis email dan itu akan menimpa bidang nama depan.
Namun, ketik string di bidang nama depan, lalu periksa elemen dan edit prop nilai nama depan ke string selain yang Anda ketikkan, dan coba isi otomatis email lagi ... kali ini tidak akan menimpa .. .karena nilainya tidak sama dengan nilai "default".
Cara lain adalah onChange, perbarui autocomplete = this.state.value. Dan Chrome akan mengenali untuk tidak melengkapi bidang ini secara otomatis karena beberapa alasan. (autocomplete = off tidak berfungsi ... itu harus berupa string acak apa pun) Jika kosong dan this.state.value kosong, maka pengisian otomatis akan tetap berfungsi di bidang seperti yang diharapkan.