Kendo DropDownList Filterable di dalam Bootstrap Modal tidak mau terbuka (auto collapsed) di IE

Kendo memang ajaib. Kadang bug nya juga ajaib. Ternyata, kalau syarat-syarat ini dipenuhi:

  • Versi Kendo UI v2017.2.621
  • Kendo DropDownList filterable
  • Diletakkan di dalam Bootstrap Modal
  • Dibuka di Internet Explorer versi 11

Waktu DropDownList diklik, dropdown terbuka tapi langsung tertutup kembali, sehingga tidak bisa dipilih maupun difilter. Penyebabnya, karena kendo salah fokus. Saat mau fokus ke input filter, malah jadi fokus ke luar. Nah, bagaimana solusinya?

Solusi 1: Letakkan kode ini di bagian script

// result = $(element).data("kendoDropDownList");
var kendoDropDownList = $().data("kendoDropDownList"); // kendo dropdownlist yang bermasalah

var $closestModal = $(result.wrapper).closest(".modal");
if ($closestModal.length > 0) {
    $closestModal.on('shown.bs.modal', function (e) {
        $(document).off('focusin.bs.modal');
    });
}

Solusi 2: Jika menggunakan terdapat kode ini di bagian script, buang bagian e.target remove();

$modal.on("hide.bs.modal", function (e) {
    //e.target.remove(); --> bagian ini jangan ada
});

Masih belum berhasil atau menemukan solusi lain? Silakan tulis di kolom komentar ya 😀

Kenji Prahyudi has written 7 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>