4

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
                }
            };
        }
    },
});
  • OS: macOS Mojave
  • Chrome: 73.0.3683.103 (64-bit)
  • Bootstrap: v4.1.3
  • select2: v4.0.5 (with select2-bootstrap-theme/0.1.0-beta.10)

P/S: It not always happen

Js Lim
  • 3,625
  • 6
  • 42
  • 80

1 Answers1

6

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

Js Lim
  • 3,625
  • 6
  • 42
  • 80
  • Bless You! I was struggling trying to get this fixed! – Ray Jun 11 '20 at 16:39
  • finally, I don't have a modal, but still something in my page was triggering the focus, all select2 fields without search box were closing immediately. Weird that the "normal" fields with search box were working ok. – zod Mar 03 '22 at 15:17