Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Up and down arrow keys not working with Bootstrap 4 #272

Open
samwarwick opened this issue Jun 20, 2020 · 1 comment
Open

Up and down arrow keys not working with Bootstrap 4 #272

samwarwick opened this issue Jun 20, 2020 · 1 comment

Comments

@samwarwick
Copy link

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants