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

Commit 36771bc

Browse files
pkempenaerspkempenaers
committed
Merge branch 'Fix-1.2.0' into Fix-1.3.0
* Fix-1.2.0: Fix for keyboard controls
2 parents 0713e2f + 266813c commit 36771bc

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
@@ -31,10 +31,10 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
3131
var template = '<div class="multiselect-parent btn-group dropdown-multiselect">';
3232
template += '<button type="button" class="dropdown-toggle" ng-class="settings.buttonClasses" ng-click="toggleDropdown()">{{getButtonText()}}&nbsp;<span class="caret"></span></button>';
3333
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" >';
34-
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>';
35-
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>';
34+
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>';
35+
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>';
3636
template += '<li ng-hide="(!settings.showCheckAll || settings.selectionLimit > 0) && !settings.showUncheckAll" class="divider"></li>';
37-
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>';
37+
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>';
3838
template += '<li ng-show="settings.enableSearch" class="divider"></li>';
3939

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

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

4949
if (checkboxes) {
5050
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))" /> <span mf-dropdown-static-include="{{settings.template}}"></div></label></span></a>';
@@ -69,13 +69,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
6969
$scope.open = !$scope.open;
7070
if ($scope.settings.keyboardControls) {
7171
if ($scope.open) {
72-
Array.prototype.slice.call(angular.element($element)[0].querySelectorAll('a'))
73-
.forEach(function(optionElement) {
74-
optionElement.addEventListener('keydown', keyDownLink);
75-
});
76-
angular.element($element)[0].querySelector('.searchField').addEventListener('keydown', keyDownSearchDefault);
7772
if ($scope.settings.selectionLimit === 1 && $scope.settings.enableSearch) {
78-
angular.element($element)[0].querySelector('.searchField').addEventListener('keydown', keyDownSearchSingle);
7973
setTimeout(function() {
8074
angular.element($element)[0].querySelector('.searchField').focus();
8175
}, 0);
@@ -84,16 +78,7 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
8478
angular.element($element)[0].querySelector('.option').focus();
8579
}, 0);
8680
}
87-
} else {
88-
Array.prototype.slice.call(angular.element($element)[0].querySelectorAll('a'))
89-
.forEach(function(optionElement) {
90-
optionElement.removeEventListener('keydown', keyDownLink);
91-
});
92-
angular.element($element)[0].querySelector('.searchField').removeEventListener('keydown', keyDownSearchDefault);
93-
if ($scope.settings.selectionLimit === 1 && $scope.settings.enableSearch) {
94-
angular.element($element)[0].querySelector('.searchField').removeEventListener('keydown', keyDownSearchSingle);
95-
}
96-
}
81+
}
9782
}
9883
};
9984

@@ -343,18 +328,18 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
343328

344329
$scope.externalEvents.onInitDone();
345330

346-
function keyDownLink(event) {
331+
$scope.keyDownLink = function(event) {
347332
var sourceScope = angular.element(event.target).scope();
348333
var nextOption;
349334
var parent = event.srcElement.parentNode;
350335
if (event.keyCode === 13 || event.keyCode === 32) { // enter
351336
event.preventDefault();
352337
if (!!sourceScope.option) {
353-
$scope.$apply($scope.setSelectedItem($scope.getPropertyForObject(sourceScope.option, $scope.settings.idProp)));
338+
$scope.setSelectedItem($scope.getPropertyForObject(sourceScope.option, $scope.settings.idProp));
354339
} else if (event.srcElement.id === 'deselectAll') {
355-
$scope.$apply($scope.deselectAll());
340+
$scope.deselectAll();
356341
} else if (event.srcElement.id === 'selectAll') {
357-
$scope.$apply($scope.selectAll());
342+
$scope.selectAll();
358343
}
359344
} else if (event.keyCode === 38) { // up arrow
360345
event.preventDefault();
@@ -387,11 +372,11 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
387372
} else if (event.keyCode === 27) {
388373
event.preventDefault();
389374

390-
$scope.$apply($scope.toggleDropdown());
375+
$scope.toggleDropdown();
391376
}
392377
}
393378

394-
function keyDownSearchDefault(event) {
379+
$scope.keyDownSearchDefault = function(event) {
395380
var parent = event.srcElement.parentNode.parentNode;
396381
var nextOption;
397382
if (event.keyCode === 9 || event.keyCode === 40) { //tab
@@ -416,18 +401,20 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
416401
} else if (event.keyCode === 27) {
417402
event.preventDefault();
418403

419-
$scope.$apply($scope.toggleDropdown());
404+
$scope.toggleDropdown();
420405
}
421406
}
422407

423-
function keyDownSearchSingle(event) {
408+
$scope.keyDownSearchSingle = function(event, searchFilter) {
424409
var searchResult;
425-
if (event.keyCode === 13) {
426-
searchResult = $filter('filter')($scope.options, $scope.searchFilter);
427-
if (searchResult.length === 1) {
428-
$scope.$apply($scope.setSelectedItem($scope.getPropertyForObject(searchResult[0], $scope.settings.idProp)));
429-
}
430-
}
410+
if ($scope.settings.selectionLimit === 1 && $scope.settings.enableSearch) {
411+
if (event.keyCode === 13) {
412+
searchResult = $filter('filter')($scope.options, searchFilter);
413+
if (searchResult.length === 1) {
414+
$scope.setSelectedItem($scope.getPropertyForObject(searchResult[0], $scope.settings.idProp));
415+
}
416+
}
417+
}
431418
}
432419
}
433420
};

0 commit comments

Comments
 (0)