Vaadin-combo-box: Terjebak dalam keadaan tidak valid

Ini tampaknya menjadi bug di vaadin-text-field sebagai gantinya. vaadin-combo-box hanya menyinkronkan properti required dan invalid dengan internal vaadin-text-field .

Saya pikir mengubah status required secara dinamis (atau batasan validasi lainnya) belum dipertimbangkan saat mengembangkan komponen.

Validasi mempertimbangkan required , pattern , maxlength dan minlength . Jika salah satu dari itu disetel, maka itu menetapkan invalid boolean berdasarkan nilai pengembalian checkValidity() pada <input> . Jika tidak ada yang disetel, Anda masih dapat mengatur invalid secara manual ke true atau false berdasarkan logika Anda sendiri dan vaadin-text-field mempertahankan status tidak valid seperti sebelumnya telah ditetapkan.

Masalahnya tampaknya ketika Anda hanya memiliki satu dari batasan validasi yang ditetapkan (misalnya required ) dan bidang telah divalidasi dan menjadi tidak valid, dan kemudian Anda menghapus batasan, itu tidak berjalan checkValidity() pada input asli lagi dan mempertahankan status invalid (seolah-olah ditambahkan secara manual). Pada dasarnya bidang teks tidak pernah secara otomatis menghapus status invalid ketika tidak ada batasan validasi aktif.

Saya pikir logika yang tepat di sini adalah mengamati ketika salah satu dari required , pattern , maxlength atau minlength dihilangkan _and_ invalid == true sudah, lalu atur this.invalid = this.inputElement.checkValidity();

Ini dapat direproduksi dengan vaadin-text-field hanya dengan memiliki:

<vaadin-text-field required="{{tfRequired}}"></vaadin-text-field><br>
<label>Required <input type="checkbox" checked="{{tfRequired::change}}"></label>

1. aktifkan kotak centang (membuat bidang teks diperlukan)
2. fokus dan hapus fokus bidang teks (membuatnya tidak valid karena masih kosong)
3. matikan kotak centang (membuat bidang teks tidak diperlukan)
4. tulis sesuatu di bidang teks dan hapus fokus, perhatikan bahwa bidang teks masih ditampilkan sebagai tidak valid

Saya membuka masalah tentang ini di sini https://github.com/vaadin/vaadin-text-field/issues/400 tapi saya akan meninggalkan masalah kotak kombo ini di sini untuk visibilitas yang lebih baik jika orang lain memperhatikan masalah dengan kotak kombo. Ini harus ditutup setelah masalah bidang teks di atas diperbaiki.

Perbaikan ini telah dirilis di vaadin-text-field v2.3.9 dan v2.4.10 .

Saya dapat mengonfirmasi bahwa itu berfungsi seperti yang diharapkan sekarang. Terima kasih atas kerja bagusnya, @Haprog! 😄

Omong-omong. afaik WebJars untuk vaadin-text-field v2.3.9 dan v2.4.10 rusak, jadi jika Anda perlu menggunakan ini dari Java (Vaadin 10–13 atau Vaadin 14 dalam mode kompatibilitas), Anda perlu menunggu sebentar. Kami harus segera merilis v2.3.10 dan v2.4.11 dengan WebJars yang berfungsi.