fix(dropdown): remove extra uib-keyboard-nav

angular-ui · Nov 13, 2015 · 36a7250 · 36a7250
1 parent 85fdfc2
commit 36a7250
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 48 deletions.
diff --git a/src/dropdown/docs/demo.html b/src/dropdown/docs/demo.html
@@ -73,7 +73,7 @@
 
     <hr>
     <!-- Single button with keyboard nav -->
-    <div class="btn-group" uib-dropdown uib-keyboard-nav>
+    <div class="btn-group" uib-dropdown keyboard-nav>
         <button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
             Dropdown with keyboard navigation <span class="caret"></span>
         </button>
@@ -92,7 +92,7 @@ <h4>append-to vs. append-to-body vs. inline example</h4>
     <div id="dropdown-scrollable-container" style="height: 15em; overflow: auto;">
       <div id="dropdown-long-content">
         <div id="dropdown-hidden-container">
-          <div class="btn-group" uib-dropdown dropdown-append-to="appendToEl">
+          <div class="btn-group" uib-dropdown keyboard-nav dropdown-append-to="appendToEl">
             <button id="btn-append-to" type="button" class="btn btn-primary" uib-dropdown-toggle>
               Dropdown in Container <span class="caret"></span>
             </button>

diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
@@ -101,7 +101,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
     }
 
     appendToBody = angular.isDefined($attrs.dropdownAppendToBody);
-    keynavEnabled = angular.isDefined($attrs.uibKeyboardNav);
+    keynavEnabled = angular.isDefined($attrs.keyboardNav);
 
     if (appendToBody && !appendTo) {
       appendTo = body;
@@ -303,45 +303,6 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
   };
 })
 
-.directive('uibKeyboardNav', function() {
-  return {
-    restrict: 'A',
-    require: '?^uibDropdown',
-    link: function(scope, element, attrs, dropdownCtrl) {
-      element.bind('keydown', function(e) {
-        if ([38, 40].indexOf(e.which) !== -1) {
-          e.preventDefault();
-          e.stopPropagation();
-
-          var elems = dropdownCtrl.dropdownMenu.find('a');
-
-          switch (e.which) {
-            case 40: { // Down
-              if (!angular.isNumber(dropdownCtrl.selectedOption)) {
-                dropdownCtrl.selectedOption = 0;
-              } else {
-                dropdownCtrl.selectedOption = dropdownCtrl.selectedOption === elems.length - 1 ?
-                  dropdownCtrl.selectedOption : dropdownCtrl.selectedOption + 1;
-              }
-              break;
-            }
-            case 38: { // Up
-              if (!angular.isNumber(dropdownCtrl.selectedOption)) {
-                dropdownCtrl.selectedOption = elems.length - 1;
-              } else {
-                dropdownCtrl.selectedOption = dropdownCtrl.selectedOption === 0 ?
-                  0 : dropdownCtrl.selectedOption - 1;
-              }
-              break;
-            }
-          }
-          elems[dropdownCtrl.selectedOption].focus();
-        }
-      });
-    }
-  };
-})
-
 .directive('uibDropdownToggle', function() {
   return {
     require: '?^uibDropdown',

diff --git a/src/dropdown/test/dropdown.spec.js b/src/dropdown/test/dropdown.spec.js
@@ -30,6 +30,12 @@ describe('dropdownToggle', function() {
     element.trigger(e);
   };
 
+  var triggerDocumentKeyDown = function (element, keyCode) {
+    var e = $.Event('keydown');
+    e.which = keyCode;
+    $document.trigger(e);
+  };
+
   var isFocused = function(elm) {
     return elm[0] === document.activeElement;
   };
@@ -547,7 +553,7 @@ describe('dropdownToggle', function() {
 
   describe('`keyboard-nav` option', function() {
     function dropdown() {
-      return $compile('<li uib-dropdown uib-keyboard-nav><a href uib-dropdown-toggle></a><ul><li><a href>Hello</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
+      return $compile('<li uib-dropdown keyboard-nav><a href uib-dropdown-toggle></a><ul><li><a href>Hello</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
     }
     beforeEach(function() {
       element = dropdown();
@@ -586,7 +592,7 @@ describe('dropdownToggle', function() {
 
   describe('`keyboard-nav` option', function() {
     function dropdown() {
-      return $compile('<li uib-dropdown uib-keyboard-nav><a href uib-dropdown-toggle></a><ul><li><a href>Hello</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
+      return $compile('<li uib-dropdown keyboard-nav><a href uib-dropdown-toggle></a><ul><li><a href>Hello</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
     }
     beforeEach(function() {
       element = dropdown();
@@ -699,7 +705,7 @@ describe('dropdownToggle', function() {
 
   describe('`keyboard-nav` option with `dropdown-append-to-body` option', function() {
     function dropdown() {
-      return $compile('<li uib-dropdown dropdown-append-to-body uib-keyboard-nav><a href uib-dropdown-toggle></a><ul class="uib-dropdown-menu" id="dropdown-menu"><li><a href>Hello On Body</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
+      return $compile('<li uib-dropdown dropdown-append-to-body keyboard-nav><a href uib-dropdown-toggle></a><ul class="uib-dropdown-menu" id="dropdown-menu"><li><a href>Hello On Body</a></li><li><a href>Hello Again</a></li></ul></li>')($rootScope);
     }
 
     beforeEach(function() {
@@ -709,7 +715,7 @@ describe('dropdownToggle', function() {
     it('should focus first list element when down arrow pressed', function() {
       clickDropdownToggle();
 
-      triggerKeyDown(element, 40);
+      triggerDocumentKeyDown(element, 40);
 
       var dropdownMenu = $document.find('#dropdown-menu');
 
@@ -720,8 +726,8 @@ describe('dropdownToggle', function() {
 
     it('should focus second list element when down arrow pressed twice', function() {
       clickDropdownToggle();
-      triggerKeyDown(element, 40);
-      triggerKeyDown(element, 40);
+      triggerDocumentKeyDown(element, 40);
+      triggerDocumentKeyDown(element, 40);
 
       var dropdownMenu = $document.find('#dropdown-menu');