Search code examples
javascriptangularjstwitter-bootstrapangular-bootstrap

Keyboard navigation on Angular uib-dropdown is not working


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>

Solution

  • I have found the solution, there needs to be a href attribute in the choices <a> tag, for the keyboard-nav to work.