bootstrap-combobox
bootstrap-combobox copied to clipboard
Up and down arrow keys not working with Bootstrap 4
When using bootstrap-combobox with Bootstrap 4 the up and down keys do not respond. This is for both the standard list and the pop-up autocomplete selection. To repro just take a copy of http://bootstrap-combobox-test.herokuapp.com/ and replace the BS3 references with BS4. Online example here: https://bootstrap-combobox-4.glitch.me/
I got it to work with the following CSS workaround:
.active > .dropdown-item, li:active > .dropdown-item {
color: #fff;
text-decoration: none;
background-color: #007bff;
}
The reason appears to be the ul/li used for the dropdown. Bootstrap 4 doesnt use them (expects a div>a
directly), so it doesnt style it properly because the active
and dropdown-item
get split up.
Changing the template halfway works with something like:
$('.combobox').combobox({
bsVersion: '4',
menu: '<div class="typeahead typeahead-long dropdown-menu"></div>',
item: '<a href="#" class="dropdown-item"></a>'
});
but the wrap around doesnt work properly, because it expects li
as its main item. Looks like it needs deeper changes to do it properly.