Skip to content
This repository was archived by the owner on Dec 16, 2019. It is now read-only.

Commit 266813c

Browse files
pkempenaerspkempenaers
committed
Fix for keyboard controls
Previously we used addEventlisteners, but with the introduction of the ng-if of the list we couldn't use those any more so now we use ng-keydown instead (this is also cleaner)
1 parent bdbfce5 commit 266813c

File tree

1 file changed

+21
-34
lines changed

1 file changed

+21
-34
lines changed

‎src/angularjs-dropdown-multiselect.js‎

Lines changed: 21 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
2323
var template = '<div class="multiselect-parent btn-group dropdown-multiselect">';
2424
template += '<button type="button" class="dropdown-toggle" ng-class="settings.buttonClasses" ng-click="toggleDropdown()">{{getButtonText()}}&nbsp;<span class="caret"></span></button>';
2525
template += '<ul class="dropdown-menu dropdown-menu-form" ng-if="open" ng-style="{display: open ? \'block\' : \'none\', height : settings.scrollable ? settings.scrollableHeight : \'auto\' }" style="overflow: auto" >';
26-
template += '<li ng-hide="!settings.showCheckAll || settings.selectionLimit > 0"><a data-ng-click="selectAll()" tabindex="-1" id="selectAll"><span class="glyphicon glyphicon-ok"></span> {{texts.checkAll}}</a>';
27-
template += '<li ng-show="settings.showUncheckAll"><a data-ng-click="deselectAll();" tabindex="-1" id="deselectAll"><span class="glyphicon glyphicon-remove"></span> {{texts.uncheckAll}}</a></li>';
26+
template += '<li ng-hide="!settings.showCheckAll || settings.selectionLimit > 0"><a ng-keydown="keyDownLink($event)" data-ng-click="selectAll()" tabindex="-1" id="selectAll"><span class="glyphicon glyphicon-ok"></span> {{texts.checkAll}}</a>';
27+
template += '<li ng-show="settings.showUncheckAll"><a ng-keydown="keyDownLink($event)" data-ng-click="deselectAll();" tabindex="-1" id="deselectAll"><span class="glyphicon glyphicon-remove"></span> {{texts.uncheckAll}}</a></li>';
2828
template += '<li ng-hide="(!settings.showCheckAll || settings.selectionLimit > 0) && !settings.showUncheckAll" class="divider"></li>';
29-
template += '<li ng-show="settings.enableSearch"><div class="dropdown-header"><input type="text" class="form-control searchField" style="width: 100%;" ng-model="searchFilter" placeholder="{{texts.searchPlaceholder}}" /></li>';
29+
template += '<li ng-show="settings.enableSearch"><div class="dropdown-header"><input type="text" class="form-control searchField" ng-keydown="keyDownSearchDefault($event); keyDownSearchSingle($event, searchFilter);" style="width: 100%;" ng-model="searchFilter" placeholder="{{texts.searchPlaceholder}}" /></li>';
3030
template += '<li ng-show="settings.enableSearch" class="divider"></li>';
3131

3232
if (groups) {
@@ -36,7 +36,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
3636
template += '<li ng-class="{\'active\': isChecked(getPropertyForObject(option,settings.idProp)) && settings.styleActive}" role="presentation" ng-repeat="option in options | filter: searchFilter">';
3737
}
3838

39-
template += '<a role="menuitem" class="option" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))">';
39+
template += '<a ng-keydown="keyDownLink($event)" role="menuitem" class="option" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))">';
4040

4141
if (checkboxes) {
4242
template += '<div class="checkbox"><label><input class="checkboxInput" type="checkbox" ng-click="checkboxClick($event, getPropertyForObject(option,settings.idProp))" ng-checked="isChecked(getPropertyForObject(option,settings.idProp))" /> {{getPropertyForObject(option, settings.displayProp)}}</label></div></a>';
@@ -61,13 +61,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
6161
$scope.open = !$scope.open;
6262
if ($scope.settings.keyboardControls) {
6363
if ($scope.open) {
64-
Array.prototype.slice.call(angular.element($element)[0].querySelectorAll('a'))
65-
.forEach(function(optionElement) {
66-
optionElement.addEventListener('keydown', keyDownLink);
67-
});
68-
angular.element($element)[0].querySelector('.searchField').addEventListener('keydown', keyDownSearchDefault);
6964
if ($scope.settings.selectionLimit === 1 && $scope.settings.enableSearch) {
70-
angular.element($element)[0].querySelector('.searchField').addEventListener('keydown', keyDownSearchSingle);
7165
setTimeout(function() {
7266
angular.element($element)[0].querySelector('.searchField').focus();
7367
}, 0);
@@ -76,16 +70,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
7670
angular.element($element)[0].querySelector('.option').focus();
7771
}, 0);
7872
}
79-
} else {
80-
Array.prototype.slice.call(angular.element($element)[0].querySelectorAll('a'))
81-
.forEach(function(optionElement) {
82-
optionElement.removeEventListener('keydown', keyDownLink);
83-
});
84-
angular.element($element)[0].querySelector('.searchField').removeEventListener('keydown', keyDownSearchDefault);
85-
if ($scope.settings.selectionLimit === 1 && $scope.settings.enableSearch) {
86-
angular.element($element)[0].querySelector('.searchField').removeEventListener('keydown', keyDownSearchSingle);
87-
}
88-
}
73+
}
8974
}
9075
};
9176

@@ -334,18 +319,18 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
334319

335320
$scope.externalEvents.onInitDone();
336321

337-
function keyDownLink(event) {
322+
$scope.keyDownLink = function(event) {
338323
var sourceScope = angular.element(event.target).scope();
339324
var nextOption;
340325
var parent = event.srcElement.parentNode;
341326
if (event.keyCode === 13 || event.keyCode === 32) { // enter
342327
event.preventDefault();
343328
if (!!sourceScope.option) {
344-
$scope.$apply($scope.setSelectedItem($scope.getPropertyForObject(sourceScope.option, $scope.settings.idProp)));
329+
$scope.setSelectedItem($scope.getPropertyForObject(sourceScope.option, $scope.settings.idProp));
345330
} else if (event.srcElement.id === 'deselectAll') {
346-
$scope.$apply($scope.deselectAll());
331+
$scope.deselectAll();
347332
} else if (event.srcElement.id === 'selectAll') {
348-
$scope.$apply($scope.selectAll());
333+
$scope.selectAll();
349334
}
350335
} else if (event.keyCode === 38) { // up arrow
351336
event.preventDefault();
@@ -378,11 +363,11 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
378363
} else if (event.keyCode === 27) {
379364
event.preventDefault();
380365

381-
$scope.$apply($scope.toggleDropdown());
366+
$scope.toggleDropdown();
382367
}
383368
}
384369

385-
function keyDownSearchDefault(event) {
370+
$scope.keyDownSearchDefault = function(event) {
386371
var parent = event.srcElement.parentNode.parentNode;
387372
var nextOption;
388373
if (event.keyCode === 9 || event.keyCode === 40) { //tab
@@ -407,18 +392,20 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
407392
} else if (event.keyCode === 27) {
408393
event.preventDefault();
409394

410-
$scope.$apply($scope.toggleDropdown());
395+
$scope.toggleDropdown();
411396
}
412397
}
413398

414-
function keyDownSearchSingle(event) {
399+
$scope.keyDownSearchSingle = function(event, searchFilter) {
415400
var searchResult;
416-
if (event.keyCode === 13) {
417-
searchResult = $filter('filter')($scope.options, $scope.searchFilter);
418-
if (searchResult.length === 1) {
419-
$scope.$apply($scope.setSelectedItem($scope.getPropertyForObject(searchResult[0], $scope.settings.idProp)));
420-
}
421-
}
401+
if ($scope.settings.selectionLimit === 1 && $scope.settings.enableSearch) {
402+
if (event.keyCode === 13) {
403+
searchResult = $filter('filter')($scope.options, searchFilter);
404+
if (searchResult.length === 1) {
405+
$scope.setSelectedItem($scope.getPropertyForObject(searchResult[0], $scope.settings.idProp));
406+
}
407+
}
408+
}
422409
}
423410
}
424411
};

0 commit comments

Comments
 (0)