Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(typeahead): add ability to scroll with matches
Browse files Browse the repository at this point in the history
- This adds scrolling capability with matches when using keyboard
  navigation

Closes #4463
  • Loading branch information
dominiksisejkovic authored and wesleycho committed Oct 30, 2015
1 parent ef82ad1 commit a1355e7
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 2 deletions.
4 changes: 3 additions & 1 deletion src/typeahead/typeahead.js
Expand Up @@ -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);

This comment has been minimized.

Copy link
@kayhadrin

kayhadrin Jan 21, 2016

Suggestion: we could also use scrollIntoViewIfNeeded() if the browser supports it because it should have a nicer scroll visual effect.

See https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded

} 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);
Expand Down Expand Up @@ -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');

Expand Down
2 changes: 1 addition & 1 deletion 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>

0 comments on commit a1355e7

Please sign in to comment.