CODEWITHSUNDEEP
jquery-select2
Js Lim
Js Lim

Reputation: 3705

jQuery select2 automatic close immediate after opened

The select2 is inside bootstrap 4 modal, and it only happen in modal.

Select2 bug

See the screenshot above, when I click on the element, it shows, then closed.

In the chrome console, I see these warning

[Violation] Avoid using document.write().
[Violation] Forced reflow while executing JavaScript took 33ms
[Violation] 'readystatechange' handler took 151ms

And here's my code

$ele.select2({
    dropdownParent: $('#bootstrap4-modal'),
    ajax: {
        url: '/path/to/data',
        type: 'get',
        dataType: 'json',
        data: function (params) {
            return {
                q: params.term,
                start: ((params.page || 1) - 1) * 10,
                length: 10,
            };
        },
        processResults: function (data, params) {
            params.page = params.page || 1;
            return {
                results: data.results,
                pagination: {
                    'more': (params.page * 10) < data.total
                }
            };
        }
    },
});

P/S: It not always happen

Upvotes: 5

Views: 2777

Answers (1)

Js Lim
Js Lim

Reputation: 3705

I think I've found a solution here, what I missing out is .modal-content

dropdownParent: $('#bootstrap4-modal .modal-content'),

Now the select2 display correctly

Upvotes: 8

Related Questions