bootstrap-combobox icon indicating copy to clipboard operation
bootstrap-combobox copied to clipboard

Up and down arrow keys not working with Bootstrap 4

Open samwarwick opened this issue 4 years ago • 1 comments

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/

samwarwick avatar Jun 20 '20 09:06 samwarwick

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.

thothonegan avatar Sep 08 '20 18:09 thothonegan