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

bleggett · Jun 11, 2015 · ee629ba · ee629ba
1 parent f02a24d
commit ee629ba
Showing 1 changed file with 45 additions and 7 deletions.
diff --git a/src/dropdown/dropdown.js b/src/dropdown/dropdown.js
@@ -62,13 +62,14 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
 
 .controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', '$position', '$document', '$compile', '$templateRequest', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate, $position, $document, $compile, $templateRequest) {
   var self = this,
-      scope = $scope.$new(), // create a child scope so we are not polluting original one
-      templateScope,
-      openClass = dropdownConfig.openClass,
-      getIsOpen,
-      setIsOpen = angular.noop,
-      toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
-      appendToBody = false;
+    scope = $scope.$new(), // create a child scope so we are not polluting original one
+	templateScope,
+    openClass = dropdownConfig.openClass,
+    getIsOpen,
+    setIsOpen = angular.noop,
+    toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
+    appendToBody = false,
+    selectedOption = null;
 
   this.init = function( element ) {
     self.$element = element;
@@ -156,6 +157,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
       }
 
       dropdownService.close( scope );
+      self.selectedOption = 0;
     }
 
     setIsOpen($scope, isOpen);
@@ -203,6 +205,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',