Up and down arrow keys not working with Bootstrap 4

[samwarwick]

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/

[thothonegan]

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.