feat(typeahead): add ability to scroll with matches

- This adds scrolling capability with matches when using keyboard navigation Closes #4463
angular-ui · Oct 30, 2015 · a1355e7 · kayhadrin · Jan 21, 2016 · a1355e7
1 parent ef82ad1
commit a1355e7
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
@@ -368,9 +368,11 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
       if (evt.which === 40) {
         scope.activeIdx = (scope.activeIdx + 1) % scope.matches.length;
         scope.$digest();
+        popUpEl.children()[scope.activeIdx].scrollIntoView(false);
       } else if (evt.which === 38) {
         scope.activeIdx = (scope.activeIdx > 0 ? scope.activeIdx : scope.matches.length) - 1;
         scope.$digest();
+        popUpEl.children()[scope.activeIdx].scrollIntoView(false);
       } else if (evt.which === 13 || evt.which === 9) {
         scope.$apply(function () {
           scope.select(scope.activeIdx);
@@ -570,7 +572,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
     };
   }])
 
-  .filter('uibTypeaheadHighlight', ['$sce', '$injector', '$log', function($sce, $injector, $log) {
+  .filter('typeaheadHighlight', ['$sce', '$injector', '$log', function($sce, $injector, $log) {
     var isSanitizePresent;
     isSanitizePresent = $injector.has('$sanitize');
 

diff --git a/template/typeahead/typeahead-popup.html b/template/typeahead/typeahead-popup.html
@@ -1,5 +1,5 @@
 <ul class="dropdown-menu" ng-show="isOpen() && !moveInProgress" ng-style="{top: position().top+'px', left: position().left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
     <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
-        <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
+        <div typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
     </li>
 </ul>