fix(typeahead): scroll only parent element

- Changes to scroll only parent element when keyboard navigation is used Closes #5212 Fixes #5180
angular-ui · Jan 12, 2016 · 3dac5e3 · 3dac5e3
1 parent db7adf7
commit 3dac5e3
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js
@@ -689,23 +689,36 @@ describe('typeahead tests', function() {
 
     it('should activate prev/next matches on up/down keys', function() {
       changeInputValueTo(element, 'b');
-      expect(element).toBeOpenWithActive(2, 0);
+      var parentNode = element.find('ul').eq(0)[0];
+      var liIndex;
+
+      liIndex = 0;
+      expect(element).toBeOpenWithActive(2, liIndex);
+      expect(parentNode.scrollTop).toEqual(element.find('li').eq(liIndex)[0].offsetTop);
 
       // Down arrow key
       triggerKeyDown(element, 40);
-      expect(element).toBeOpenWithActive(2, 1);
+      liIndex = 1;
+      expect(element).toBeOpenWithActive(2, liIndex);
+      expect(parentNode.scrollTop).toEqual(element.find('li').eq(liIndex)[0].offsetTop);
 
       // Down arrow key goes back to first element
       triggerKeyDown(element, 40);
-      expect(element).toBeOpenWithActive(2, 0);
+      liIndex = 0;
+      expect(element).toBeOpenWithActive(2, liIndex);
+      expect(parentNode.scrollTop).toEqual(element.find('li').eq(liIndex)[0].offsetTop);
 
       // Up arrow key goes back to last element
       triggerKeyDown(element, 38);
-      expect(element).toBeOpenWithActive(2, 1);
+      liIndex = 1;
+      expect(element).toBeOpenWithActive(2, liIndex);
+      expect(parentNode.scrollTop).toEqual(element.find('li').eq(liIndex)[0].offsetTop);
 
       // Up arrow key goes back to first element
       triggerKeyDown(element, 38);
-      expect(element).toBeOpenWithActive(2, 0);
+      liIndex = 0;
+      expect(parentNode.scrollTop).toEqual(element.find('li').eq(liIndex)[0].offsetTop);
+      expect(element).toBeOpenWithActive(2, liIndex);
     });
 
     it('should close popup on escape key', function() {

diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
@@ -372,7 +372,7 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap
       }
 
       evt.preventDefault();
-
+      var target;
       switch (evt.which) {
         case 9:
         case 13:
@@ -395,12 +395,14 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.debounce', 'ui.bootstrap
         case 38:
           scope.activeIdx = (scope.activeIdx > 0 ? scope.activeIdx : scope.matches.length) - 1;
           scope.$digest();
-          popUpEl.find('li')[scope.activeIdx].scrollIntoView(false);
+          target = popUpEl.find('li')[scope.activeIdx];
+          target.parentNode.scrollTop = target.offsetTop;
           break;
         case 40:
           scope.activeIdx = (scope.activeIdx + 1) % scope.matches.length;
           scope.$digest();
-          popUpEl.find('li')[scope.activeIdx].scrollIntoView(false);
+          target = popUpEl.find('li')[scope.activeIdx];
+          target.parentNode.scrollTop = target.offsetTop;
           break;
       }
     });