select2 not working after updating jquery to 3.6 or bootstrap to 5.1
select2 not working after updating jquery to 3.6 or bootstrap to 5.1
He everyone!
Select2 doesn't focus anymore on the input when opening after updating JQuery to 3.6.
testcase here: http://live.datatables.net/covuqelu/1/edit
to reproduce:
- click new to open the editor,
- click on the priority select2 field and it opens select2
- it doesn't set focus to the actual input field (you can click it and it works though)
If you change jquery to 3.5.1 by replacing the script to
it sets focus on the input after opening the select2 popup.
Furthermore, updating to bootstrap 5.1, breaks the entire input field.
to reproduce change the bootstrap library to 5.1:
- click new to open the editor,
- click on the priority select2 field and it opens select2
- it doesn't set focus to the actual input field but you also can't click on it or type anything
Anyone else running into this?
Cheers!
W
Answers
I've updated your test case here so it's using jQuery 3.6.0 and BS 5.1.0 and everything appears to be working fine for me:
This is on Ubuntu/Chrome. Please could you take a look in case I'm doing something wrong,
Colin
I had the same issue and rolling back to JQuery 3.51 fixed the issue.
Hi Colin,
I have the same issue with Bootstrap 4.
The searchfield on top of the dropdown should have autofocus after opening the dropdown. With jQuery 3.6.0 you have to click on the searchfield to be able to type.
See here with jQery 3.6.0:
With jQuery 3.5.1 focus is immediately on the searchfield:
I created a testcase with bootstrap4 since the searchfield in wouter's testcase doesn't work at all. With Bootstrap 5 when clicking on the searchfield the modal close button gets focused:
After a bit of searching I found this select2 github issue. Looks like the workaround in post seems to work:
http://live.datatables.net/ganadata/4/edit
Kevin
Ahh... so it's not a DataTables issue at all. Thank you Kevin, this solves the Bootstrap 4 and 5 issue.