typeahead keyboard navigation not working

[egore]

Using typeahead the keyboard navigation is not working. This can be seen at https://morgul.github.io/ui-bootstrap4/.

[pbldk]

To fix the issue we need to change in uib/template/typeahead/typeahead-popup.html The line: <li class=\"uib-typeahead-match\" ng-repeat=\"match in matches track by $index\" to: <li class=\"uib-typeahead-match dropdown-item\" ng-repeat=\"match in matches track by $index\"

As a hack in 3.0.6 this can be set in the uncompressed jsfile before minification.

Tested in multiple browsers on Windows & Mac/iPhone.

I personally set typeahead-focus-first="false" at the input field as a default, I find the auto-select a bit too intrusive for the user. That's just an input.

[egore]

Nice hack, I was unable to figure it out due to time constraints.

[markusberg]

Thanks for finding this. While the solution provided above does fix the issue with keyboard navigation, it doesn't use correct markup for Bootstrap 4 dropdowns, which causes dual padding, and dual highlights on hover.

I combined the typeahead-match template with typeahead-popup.html, and then replaced the typeahead-popup template in the $templateCache in a run-block:

import { ITemplateCacheService } from 'angular'

const typeaheadPopup = `<div
  class="dropdown-menu"
  ng-show="isOpen() && !moveInProgress"
  ng-style="{top: position().top+'px', left: position().left+'px'}"
  role="listbox"
  aria-hidden="{{!isOpen()}}"
  >
  <a
    class="uib-typeahead-match dropdown-item clickable"
    ng-repeat="match in matches track by $index"
    ng-class="{active: isActive($index) }"
    ng-mouseenter="selectActive($index)"
    ng-click="selectMatch($index, $event)"
    role="option"
    id="{{::match.id}}"
    ng-bind-html="match.label | uibTypeaheadHighlight:query"
    ng-attr-title="{{match.label}}"
  ></a>
</div>`

uibTemplateFix.$inject = ['$templateCache']
export function uibTemplateFix($templateCache: ITemplateCacheService) {
  $templateCache.put(
    'uib/template/typeahead/typeahead-popup.html',
    typeaheadPopup,
  )
}

import { uibTemplateFix } from './configs/uib-template-fix.config'
angular.module('myApp', [ 'ui.bootstrap' ]).run(uibTemplateFix)

Disclaimer: only tested on desktop Firefox, Chrome, and Edge.