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

Commit c6b0576

Browse files
pkempenaerspkempenaers
committed
Merge branch 'Fix-1.3.0' into Fix-1.4.0
* Fix-1.3.0: Fix for keyboard controls
2 parents 4c43a28 + 36771bc commit c6b0576

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:getFilter(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

@@ -344,18 +329,18 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
344329

345330
$scope.externalEvents.onInitDone();
346331

347-
function keyDownLink(event) {
332+
$scope.keyDownLink = function(event) {
348333
var sourceScope = angular.element(event.target).scope();
349334
var nextOption;
350335
var parent = event.srcElement.parentNode;
351336
if (event.keyCode === 13 || event.keyCode === 32) { // enter
352337
event.preventDefault();
353338
if (!!sourceScope.option) {
354-
$scope.$apply($scope.setSelectedItem($scope.getPropertyForObject(sourceScope.option, $scope.settings.idProp)));
339+
$scope.setSelectedItem($scope.getPropertyForObject(sourceScope.option, $scope.settings.idProp));
355340
} else if (event.srcElement.id === 'deselectAll') {
356-
$scope.$apply($scope.deselectAll());
341+
$scope.deselectAll();
357342
} else if (event.srcElement.id === 'selectAll') {
358-
$scope.$apply($scope.selectAll());
343+
$scope.selectAll();
359344
}
360345
} else if (event.keyCode === 38) { // up arrow
361346
event.preventDefault();
@@ -388,11 +373,11 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
388373
} else if (event.keyCode === 27) {
389374
event.preventDefault();
390375

391-
$scope.$apply($scope.toggleDropdown());
376+
$scope.toggleDropdown();
392377
}
393378
}
394379

395-
function keyDownSearchDefault(event) {
380+
$scope.keyDownSearchDefault = function(event) {
396381
var parent = event.srcElement.parentNode.parentNode;
397382
var nextOption;
398383
if (event.keyCode === 9 || event.keyCode === 40) { //tab
@@ -417,18 +402,20 @@ directiveModule.directive('ngDropdownMultiselect', ['$filter', '$document', '$co
417402
} else if (event.keyCode === 27) {
418403
event.preventDefault();
419404

420-
$scope.$apply($scope.toggleDropdown());
405+
$scope.toggleDropdown();
421406
}
422407
}
423408

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

434421
$scope.getFilter = function(searchFilter) {

0 commit comments

Comments
 (0)