fix(dropdown): handle keyboard-nav correctly

- properly handle arrow key navigation in dropdown button menus

fixes angular-ui#4091

Author: icfantv

src/dropdown/dropdown.js

@@ -278,7 +278,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
           e.preventDefault();
           e.stopPropagation();
 
-          var elems = angular.element(element).find('a');
+          var elems = dropdownCtrl.dropdownMenu.find('a');
 
           switch (e.keyCode) {
             case (40): { // Down
@@ -299,7 +299,6 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
         }
       });
     }
-
   };
 })
 

src/dropdown/test/dropdown.spec.js

@@ -23,6 +23,11 @@ describe('dropdownToggle', function() {
     elm.find('a[dropdown-toggle]').click();
   };
 
+  var clickDropdownButtonToggle = function(elm) {
+    elm = elm || element;
+    elm.find('button[dropdown-toggle]').click();
+  };
+
   var triggerKeyDown = function (element, keyCode) {
     var e = $.Event('keydown');
     e.which = keyCode;
@@ -673,4 +678,40 @@ describe('dropdownToggle', function() {
       expect(isFocused(focusEl)).toBe(true);
     });
   });
+
+  describe('button dropdown menu with `keyboard-nav` option with `dropdown-append-to-body` option - #4091', function() {
+    function dropdown() {
+      return $compile('<div dropdown keyboard-nav dropdown-append-to-body><button dropdown-toggle>Dropdown on Body</button><ul class="dropdown-menu"><li><a>Hello on Body</a></li><li><a>Hello Again</a></li></ul></div>')($rootScope);
+    }
+
+    beforeEach(function() {
+      element = dropdown();
+    });
+
+    it('should focus first list element when down arrow pressed', function() {
+      clickDropdownButtonToggle();
+
+      triggerKeyDown($document, 40);
+
+      expect(element.hasClass(dropdownConfig.openClass)).toBe(true);
+      expect(element.controller('dropdown').selectedOption).toBe(0); // document.activeElement won't be <li>
+    });
+
+    it('should not focus first list element when down arrow pressed if closed', function() {
+      triggerKeyDown($document, 40);
+
+      expect(element.hasClass(dropdownConfig.openClass)).toBe(false);
+      var focusEl = $document.find('ul').eq(0).find('a');
+      expect(isFocused(focusEl)).toBe(false);
+    });
+
+    it('should focus second list element when down arrow pressed twice', function() {
+      clickDropdownButtonToggle();
+      triggerKeyDown($document, 40);
+      triggerKeyDown($document, 40);
+
+      expect(element.hasClass(dropdownConfig.openClass)).toBe(true);
+      expect(element.controller('dropdown').selectedOption).toBe(1); // document.activeElement won't be <li>
+    });
+  });
 });