Input focus() hilang selesai panggil kendoWindow

Yang sedang bermain dengan kendo terutama komponen kendoWindow mungkin pernah mengalami keganjilan kode kita di dalam kendoWindow *saya sebut popup kendo*. Di dalam popup kendo, biasa saya tampilkan form popup lalu langsung focus() di salah satu input form. Ini dilakukan untuk efesiensi saja sih, biar user ga pegang mouse lagi untuk mengarahkan ke salah satu input.

Untuk define awal kendoWindow biasa seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
var win_barcode = $("#barcode_dialog").kendoWindow({
    title: "BARCODE SCANNER",
    visible: false,
    width: "80%",
    draggable: true,
    autoFocus: true,
    height: "300px",
    actions: [ "Close" ],
    modal: true
}).data("kendoWindow");

Lalu cara panggilnya seperti kode berikut.

1
2
$('#formdata_barcode')[0].reset();
$("#barcode_dialog").data("kendoWindow").center().open();

$(‘#formdata_barcode’)[0].reset(); adalah kode untuk mereset semua form di dalam popup kendo. sedangkan kode $(“#barcode_dialog”).data(“kendoWindow”).center().open(); adalah kode untuk memanggil kendo popup window untuk center dan open *muncul ditengah*.

Nah, saya coba untuk focus di salah satu form di dalam popup kendo dengan kode tambahan seperti dibawah ini.

1
2
3
$('#formdata_barcode')[0].reset();
$("#barcode_dialog").data("kendoWindow").center().open();
$('#barcode_sparepart_code').focus();

Dengan kode diatas, jika saya jalankan, memang langsung focus ke salah satu input di form popup, namun tidak lama dan cepat sekali focus tersebut hilang entah kemana. Sehingga focus popup di salah satu form input tersebut tidak ada.

Penasaran, mungkin saya salah menaruhnya, seharusnya di sebelum kode pemanggilan popup seperti kode dibawah ini.

1
2
3
$('#formdata_barcode')[0].reset();
$('#barcode_sparepart_code').focus();
$("#barcode_dialog").data("kendoWindow").center().open();

Dengan kode diatas pun saya mendapatkan hasil yang sama. Focus tidak bisa.

Penasaran saya baca doc event untuk kendoWindow kembali dan menemukan event setelah popup selesai keluar yaitu event “activate”. Saya coba arahkan saja focus tersebut di event ini seperti kode dibawah ini.

1
2
3
4
5
6
7
8
9
10
11
12
13
var win_barcode = $("#barcode_dialog").kendoWindow({
    title: "BARCODE SCANNER",
    visible: false,
    width: "80%",
    draggable: true,
    autoFocus: true,
    height: "300px",
    actions: [ "Close" ],
    modal: true,
    activate: function(){
        $('#barcode_sparepart_code').focus();
    }
}).data("kendoWindow");

Dan dari event activate tersebut, hasil yang saya inginkan pun berhasil sesuai harapan 🙂
Kurang baca doc aja nih 🙂

Leave a Reply

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

%d bloggers like this: