From efbf1f1a4345a6e5c846514d1682e1a8253a2403 Mon Sep 17 00:00:00 2001
From: Adam Gordon <adam@gordonizer.com>
Date: Tue, 4 Aug 2015 09:16:19 -0600
Subject: [PATCH] fix(dropdown): handle `keyboard-nav` correctly

- properly handle arrow key navigation in dropdown button menus

fixes #4091
---
 src/dropdown/dropdown.js           |  3 +--
 src/dropdown/test/dropdown.spec.js | 41 ++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
index 4c4c5e0669..8c81281510 100644
--- a/src/dropdown/dropdown.js
+++ b/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'])
         }
       });
     }
-
   };
 })
 
diff --git a/src/dropdown/test/dropdown.spec.js b/src/dropdown/test/dropdown.spec.js
index 0e21b6f666..f49e0ad88f 100644
--- a/src/dropdown/test/dropdown.spec.js
+++ b/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>
+    });
+  });
 });