Add keynav support to dropdown (angular-ui#1228)

bleggett · Jun 11, 2015 · 3956f90 · 3956f90
1 parent ed4db50
commit 3956f90
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
@@ -246,6 +246,42 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
   };
 })
 
+.directive('keyboardNav', function() {
+  return {
+    restrict: 'A',
+    require: '?^dropdown',
+    link: function (scope, element, attrs, dropdownCtrl) {
+
+      element.bind('keydown', function(e) {
+
+        e.preventDefault();
+        e.stopPropagation();
+
+        var elems = angular.element(element).find('a');
+        switch (e.keyCode) {
+          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
+            {
+            dropdownCtrl.selectedOption = (dropdownCtrl.selectedOption === 0 ? 0 : dropdownCtrl.selectedOption-1);
+          }
+          break;
+        }
+        elems[dropdownCtrl.selectedOption].focus();
+      });
+    }
+  };
+})
+
 .directive('dropdownToggle', function() {
   return {
     require: '?^dropdown',