Skip to content

Commit b5e970f

Browse files
committed
Add keynav support to dropdown (angular-ui#1228)
1 parent e9b9eb0 commit b5e970f

File tree

1 file changed

+44
-6
lines changed

1 file changed

+44
-6
lines changed

src/dropdown/dropdown.js

+44-6
Original file line numberDiff line numberDiff line change
@@ -62,12 +62,13 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
6262

6363
.controller('DropdownController', ['$scope', '$attrs', '$parse', 'dropdownConfig', 'dropdownService', '$animate', '$position', '$document', function($scope, $attrs, $parse, dropdownConfig, dropdownService, $animate, $position, $document) {
6464
var self = this,
65-
scope = $scope.$new(), // create a child scope so we are not polluting original one
66-
openClass = dropdownConfig.openClass,
67-
getIsOpen,
68-
setIsOpen = angular.noop,
69-
toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
70-
appendToBody = false;
65+
scope = $scope.$new(), // create a child scope so we are not polluting original one
66+
openClass = dropdownConfig.openClass,
67+
getIsOpen,
68+
setIsOpen = angular.noop,
69+
toggleInvoker = $attrs.onToggle ? $parse($attrs.onToggle) : angular.noop,
70+
appendToBody = false,
71+
selectedOption = null;
7172

7273
this.init = function( element ) {
7374
self.$element = element;
@@ -135,6 +136,7 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
135136
dropdownService.open( scope );
136137
} else {
137138
dropdownService.close( scope );
139+
self.selectedOption = 0;
138140
}
139141

140142
setIsOpen($scope, isOpen);
@@ -174,6 +176,42 @@ angular.module('ui.bootstrap.dropdown', ['ui.bootstrap.position'])
174176
};
175177
})
176178

179+
.directive('keyboardNav', function() {
180+
return {
181+
restrict: 'A',
182+
require: '?^dropdown',
183+
link: function (scope, element, attrs, dropdownCtrl) {
184+
185+
element.bind('keydown', function(e) {
186+
187+
e.preventDefault();
188+
e.stopPropagation();
189+
190+
var elems = angular.element(element).find('a');
191+
switch (e.keyCode) {
192+
case (40): // Down
193+
{
194+
195+
if ( !angular.isNumber(dropdownCtrl.selectedOption) ) {
196+
dropdownCtrl.selectedOption = 0;
197+
} else {
198+
dropdownCtrl.selectedOption = (dropdownCtrl.selectedOption === elems.length -1 ? dropdownCtrl.selectedOption : dropdownCtrl.selectedOption+1);
199+
}
200+
201+
}
202+
break;
203+
case (38): // Up
204+
{
205+
dropdownCtrl.selectedOption = (dropdownCtrl.selectedOption === 0 ? 0 : dropdownCtrl.selectedOption-1);
206+
}
207+
break;
208+
}
209+
elems[dropdownCtrl.selectedOption].focus();
210+
});
211+
}
212+
};
213+
})
214+
177215
.directive('dropdownToggle', function() {
178216
return {
179217
require: '?^dropdown',

0 commit comments

Comments
 (0)