I'm using Angular Bootstrap 2.2.0 with Angular 1.5.
The keyboard navigation doesn't work on UIB dropdowns even with the keyboard-nav
option enabled. Here's my code:
<div class="btn-group"
uib-dropdown
keyboard-nav="true"
on-toggle="vm.setTouchNgModel(open)">
<button type="button"
class="btn btn-secondary btn-dropdown"
ng-class="{'text-muted': !vm.selectedOptionLabel }"
uib-dropdown-toggle
ng-disabled="vm.selectDisabled">
{{ vm.selectedOptionLabel || ((vm.selectPlaceholder | translate) || vm.selectPlaceholder) }}
<i class="caret"></i>
</button>
<ul class="dropdown-menu"
uib-dropdown-menu
role="menu"
aria-labelledby="btn-append-to-single-button">
<li ng-if="vm.inlineOption">
<a ng-click="vm.setSelectModel(vm.inlineOption)">{{ vm.inlineOption[vm.labelProperty] }}</a>
</li>
<li ng-repeat="option in ((vm.filterName && vm.applyFilter(vm.options, vm.filterName, vm.filterOptions, vm.filterExpression)) || vm.options)">
<a role="menuitem" ng-click="vm.setSelectModel(option)">{{ ((option[vm.labelProperty] || option.label || option) | translate) || ((option[vm.labelProperty] || option.label || option) | translate) }}</a>
</li>
</ul>
</div>
I have found the solution, there needs to be a href
attribute in the choices <a>
tag, for the keyboard-nav
to work.