<p>vaadin-combo-box ketika ditempatkan di dalam paper-dialog menutup dialog dalam beberapa kasus.</p>

Dibuat pada 21 Feb 2017 · 19Komentar · Sumber: vaadin/vaadin-combo-box

Keterangan

Ketika elemen vaadin-combo-box ditempatkan di dalam dialog-kertas, jika pengguna membuka kotak untuk memilih (tetapi tidak memilih, biarkan terbuka) lalu klik di mana saja dalam dialog menutup dialog.

Hasil yang diharapkan

Klik di mana saja dalam dialog (hal. pojok kiri atas) akan menutup kotak, tetapi biarkan dialog terbuka.

Hasil sebenarnya

Klik di mana saja dalam dialog menutup seluruh dialog.

Demo Langsung

https://jsfiddle.net/ribe/02tntfn3/2/

Langkah-langkah untuk mereproduksi

Buka dialognya,
buka kotak, dan jangan pilih - biarkan terbuka,
3.Klik di sudut kiri atas dialog.

Sumber

GoceRibeski

Komentar yang paling membantu

FYI, ini juga terjadi jika Anda hanya memilih item di kotak kombo menggunakan mouse Anda ...

kito99 pada 2 Mar 2017

👍7

Semua 19 komentar

Ada semacam bug dengan propagasi acara. E.g. menutup vaadin-combo-box dengan menekan Esc juga menutup dialog. Dalam kasus seperti itu saya biasanya menggunakan sesuatu seperti on-keydown="_stopPropagation" dan kemudian hanya menambahkan handler seperti ini:

_stopPropafation: function (e) {
  e.stopPropagation()
}

Ada juga properti stopKeyboardEventPropagation yang disediakan oleh IronA11yKeysBehavior , tetapi perilaku itu tidak diterapkan oleh vaadin-combo-box dan properti itu tampaknya tidak berfungsi untuk beberapa elemen lain, sepertinya ia terlambat menangani acara.

web-padawan pada 21 Feb 2017

Saya tidak dapat menemukan tempat untuk menempatkan acara yang akan memanggil stopPropagation di Fiddle yang diberikan. Ada ide?

GoceRibeski pada 21 Feb 2017

Hai, yang di sana!

Tantangannya di sini adalah bahwa hamparan <vaadin-combo-box> ditempatkan di bawah <body> , yang berada di luar <paper-dialog> sehingga menganggap setiap klik pada hamparan kotak kombo sebagai "klik luar ", yang secara default menutup dialog.

Sebagai solusinya, Anda dapat menonaktifkan klik luar saat kotak kombo terbuka:

...
<vaadin-combo-box id="third" label="Focus Third" tabindex="3" on-focus="_focusInput" items="[[items]]" on-blur="_onBlur" on-opened-changed="_onComboBoxOpened">
        </vaadin-combo-box>

<script>
...
_onComboBoxOpened: function(e) {
  if (e.detail.value) {
    this.$.add_row_details_dialog.noCancelOnOutsideClick = true;
  } else {
    this.async(function() {
      this.$.add_row_details_dialog.noCancelOnOutsideClick = false;
    }, 10);
  }
}
...
</script>

Saulis pada 1 Mar 2017

@Saulis , sayangnya pendekatan Anda tidak berhasil untuk saya. Namun, saya baru saja mengatur properti noCancelOnOutsideClick menjadi true pada dialog kertas, dan itu memperbaiki masalah (tidak ada persyaratan untuk menutup dialog ketika Anda mengklik di luarnya, dalam kasus ini).

kito99 pada 2 Mar 2017

👍1

FYI, ini juga terjadi jika Anda hanya memilih item di kotak kombo menggunakan mouse Anda ...

kito99 pada 2 Mar 2017

👍7

Terapkan 'no-cancel-on-outside-click' ke elemen dialog kertas. Ini akan mencegah dialog ditutup saat Anda memilih elemen di kotak kombo vaadin dengan klik mouse atau dari keyboard.

<paper-dialog no-cancel-on-outside-click> <vaadin-combo-box class="elements-box" items="[[arrayOfValues]]"></vaadin-combo-box> </paper-dialog>

artem-vladimirov pada 17 Mar 2017

👍1

@kito99 / @artem-vladimirov's solusi dengan no-cancel-on-outside-click tidak cocok secara umum atau untuk saya, karena saya ingin pengguna dapat menutup dialog dengan klik luar. (Tetapi saya dapat mengonfirmasi bahwa itu berfungsi jika itu bukan persyaratan).

Solusi lain (mirip) adalah mendengarkan acara iron-overlay-canceled dan kemudian memanggil event.stopPropagation() dan event.preventDefault() , tetapi ini memiliki masalah yang sama dengan solusi lainnya - ini mencegah penutupan dialog pada klik latar belakang.

Saya sudah mencoba membedakan dua peristiwa satu sama lain tetapi sejauh ini tidak berhasil.

Saya dapat mengonfirmasi pengamatan @kito99 bahwa hanya dengan memilih item akan menutup dialog, dan begitu juga membatalkan pemilihan dengan mengklik dialog-kertas.

EDIT:

Saya datang dengan solusi berikut:

        listeners: {
          "iron-overlay-canceled": "onCanceled",
        },
        onCanceled(event) {
            const paperDialogHoverElement = document.querySelector("paper-dialog:hover");
            const vaadinHoverElement = document.querySelector("vaadin-combo-box-overlay:hover");
            if (paperDialogHoverElement || vaadinHoverElement) {
                event.stopPropagation();
                event.preventDefault();
            }
        }

Singkatnya, acara dibatalkan hanya jika kursor berada pada dialog-kertas atau pada elemen hamparan. Dengan solusi ini saya dapat memilih nilai dropdown, menutup dialog dengan klik luar dan juga menutup dialog dengan tombol escape. Diuji di Chrome dan Firefox.

panuhorsmalahti pada 3 Apr 2017

Apakah ada sesuatu yang harus dilakukan di sini selain menunggu versi baru? solusi vaadin resmi?

timoteoponce pada 10 Mei 2017

Tidak yakin mengapa saya benar-benar melewatkan masalah ini begitu lama. Ini adalah masalah kegunaan yang sangat mendasar dan harus diperbaiki secepatnya. Saya akan melihat apakah saya dapat menginspirasi @Saulis atau orang lain dari tim pengembang untuk melihat ini atau minggu depan.

jouni pada 10 Mei 2017

👍1

Hai teman-teman, silakan coba cabang iron-overlay-cancel (sayangnya itu dibangun di atas master saat ini sehingga mungkin ada beberapa konflik ketergantungan dengan itu menjadi hibrida – selesaikan deps ke 2.0-preview , dan Polimer ke mana pun Anda ingin)

Saya juga memilih perubahan di atas cabang 1.x ( iron-overlay-cancel-v1 ) tetapi saat ini tidak dapat memverifikasi itu berfungsi sendiri karena saya tidak ingin mengacaukan pengaturan bower Polymer 2 saya: -)

Pembaruan: perbaikan ini mungkin hanya berfungsi pada iron-overlay-behavior v1.10.3 atau lebih baru.

Saulis pada 10 Mei 2017

@GoceRibeski @web-padawan @kito99 @artem-vladimirov @panuhorsmalahti @timoteoponce ada yang punya kesempatan untuk mencoba perbaikannya? Terima kasih!

Saulis pada 12 Jun 2017

@Saulis Terima kasih telah mengingatkan. Saya baru saja mengambil cabang iron-overlay-cancel-v1 dan saya melihat peringatan:

[vaadin-combo-box::_createEventHandler]: listener method `_onBlur` not defined

Jadi, setelah paper-dialog dan inner vaadin-combo-box dibuka, saya mencoba dua hal:

Saat menekan tombol Esc, dialog ditutup sementara hamparan kotak kombo tetap terbuka,
Saat memilih item, dialog dan kotak kombo ditutup.

Saya tidak punya banyak waktu untuk menyelidiki sekarang, tetapi saya rasa pendengar yang hilang mungkin menjadi alasannya.

web-padawan pada 12 Jun 2017

@web-padawan terima kasih! tidak perlu khawatir tentang _onBlur yang hilang, itu adalah pendengar yang sengaja dihapus, tetapi secara tidak sengaja membiarkan pendengar itu mengikat di tempatnya. Saya perlu menguji ulang masalah yang Anda laporkan, saya sendiri belum menguji cabang v1.

Saulis pada 12 Jun 2017

@web-padawan Saya dapat mengonfirmasi bahwa perbaikan berhasil untuk saya baik pada iron-overlay-cancel dengan Polymer 2.x dan iron-overlay-cancel-v1 Polymer 1.9.1 – harap periksa kembali apakah Anda memiliki iron-overlay-behavior v1.10.3 atau yang lebih baru diinstal (Saya menjalankan 2.0.0 )

Saulis pada 12 Jun 2017

@Saulis Ini tidak berhasil untuk saya. Bahkan saya memiliki bug aneh yang tidak ada di 2.0a4. Semua teks dari template saya menghilang

Saya menjalankan Polymer 2 dengan iron-overlay-behavior#2.0.0

Ini 2.0.0-alpha4 : http://www.giphy.com/gifs/3ohzdQKeVtoswDSpfW
Ini cabang iron-overlay-cancel : http://www.giphy.com/gifs/3o7btZ3T0yMwKkG6fm

arkihillel pada 12 Jun 2017

@arkihillel Saya telah mengubah iron-overlay-cancel di atas master , dapatkah Anda mencoba lagi? Dan pastikan Anda menginstal ulang semua deps bower.

Saulis pada 12 Jun 2017

Tampaknya bekerja untuk saya.
Menggunakan: vaadin-combo-box#iron-overlay-cancel, polymer#2.0.1, iron-overlay-behavior#2.0.0

Btw, bukan masalah besar, tetapi Anda mungkin salah ketik dengan _removeOutsideTabListener , yaitu Tab vs Tap ;)

jonagh pada 12 Jun 2017

@Saulis Bekerja sekarang!
Maaf untuk editnya, saya pikir saya menemukan bug aneh tapi itu kesalahan saya

arkihillel pada 13 Jun 2017

👍1

Apakah sudah ada solusi yang stabil?
Saat Item dipilih menggunakan mouse, acara (selectedItemChange) dipicu dua kali; yang pertama dengan Item baru yang dipilih dan yang kedua dengan yang sebelumnya (tidak mungkin mengubah pilihan).
Terima kasih.