React: Bug: Input minLength tidak berfungsi setelah jenis diubah

Dibuat pada 5 Nov 2020 · 3Komentar · Sumber: facebook/react

Saya memiliki input dengan jenis kata sandi dengan minLength 8, dan saya memiliki sakelar untuk mengubah jenis menjadi teks (pengalihan kata sandi).
ketika saya mengetik dengan panjang <8 dan tekan kirim, itu mencegah pengiriman. tetapi, ketika saya mengganti kata sandi sehingga mengubah jenis menjadi teks dan mengirimkan formulir, itu dapat dikirimkan. btw saya menggunakan useRef()

Versi reaksi:
reaksi: ^17.0.1
reaksi-dom: ^17.0.1

Langkah-langkah Untuk Mereproduksi

ketik karakter < minLength
menyerahkan formulir
beralih jenis formulir
menyerahkan formulir

Tautan ke contoh kode: DEMO

Perilaku saat ini

Formulir dikirim meskipun di bawah minLength

Perilaku yang diharapkan

Formulir tidak dikirimkan saat di bawah minLength

Safari DOM Bug

Sumber

Vandoct

Komentar yang paling membantu

Terima kasih, saya dapat mereproduksi ini.

Umumnya validasi apa pun diabaikan jika inputnya murni. Jika Anda mengirimkan formulir tanpa mengetik apa pun, minLength akan diabaikan.

Safari dengan benar menandai formulir sebagai tidak valid jika Anda mengetik sesuatu yang tidak melewati semua batasan. Namun, ketika type berubah, Safari tampaknya menganggap input tersebut murni. Oleh karena itu nilai yang tidak valid dikirimkan jika type berubah setelah pengetikan selesai.

Pertanyaannya adalah apakah React dapat atau harus memperbaiki kekhasan ini atau apakah Safari harus memperbaikinya.

Sunting:
Repro minimal tanpa reaksi apa pun: https://codesandbox.io/s/condescending-bhabha-n4374?file=/src/index.js

Jika Anda memerlukan perilaku ini, saya sarankan mengajukan bug dengan Safari.

eps1lon pada 5 Nov 2020

👍2

Semua 3 komentar

Terima kasih atas laporannya.

Saya dapat melihat dua masalah:

demo Anda menggunakan minLength="3" bukan 8.
Mengetik kurang dari 8 karakter tidak masalah selama Anda mengetik lebih dari 2
minLength tidak didukung di IE 11: https://caniuse.com/input-minlength
Saya menguji demo Anda di Chrome 85 dan tidak dapat mengirimkannya saat saya memasukkan kurang dari 2 karakter.
Browser apa yang Anda gunakan saat menguji kode Anda?

eps1lon pada 5 Nov 2020

Saya menggunakan mac os 10.14.6 dan browser Safari 13.0.5 (14608.5.12)
saya lupa sesuatu, jangan ketik karakter apa pun setelah mengaktifkannya

btw, ketika saya mencoba dengan Chrome 86.0.4240.183 berfungsi dengan baik. saya pikir itu hanya terjadi di safari