close umb-dropdown on esc press

src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js

@@ -2,6 +2,7 @@
 @ngdoc directive
 @name umbraco.directives.directive:umbDropdown
 @restrict E
+@scope
 
 @description
 <b>Added in versions 7.7.0</b>: Use this component to render a dropdown menu.
@@ -18,10 +19,9 @@
                 action="vm.toggle()">
             </umb-button>
 
-            <umb-dropdown ng-if="vm.dropdownOpen" umb-keyboard-list>
+            <umb-dropdown ng-if="vm.dropdownOpen" on-close="vm.close()" umb-keyboard-list>
                 <umb-dropdown-item
-                    ng-repeat="item in vm.items"
-                    on-outside-click="vm.close()">
+                    ng-repeat="item in vm.items">
                     <a href="" ng-click="vm.select(item)">{{ item.name }}</a>
                 </umb-dropdown-item>
             </umb-dropdown>
@@ -75,18 +75,53 @@
     <li>{@link umbraco.directives.directive:umbKeyboardList umbKeyboardList}</li>
 </ul>
 
+@param {callback} onClose Callback when the dropdown menu closes. When you click outside or press esc.
+
 **/
 
 (function() {
     'use strict';
 
-    function umbDropdown() {
+    function umbDropdown($document) {
+
+        function link(scope, element, attr, ctrl) {
+
+            scope.close = function() {
+                if (scope.onClose) {
+                    scope.onClose();
+                }
+            };
+
+            // Handle keydown events
+            function keydown(event) {
+                // press escape
+                if(event.keyCode === 27) {
+                    scope.onClose();
+                }
+            }
+
+            // Stop to listen typing.
+            function stopListening() {
+                $document.off('keydown', keydown);
+            }
+
+            // Start listening to key typing.
+            $document.on('keydown', keydown);
+
+            // Stop listening when scope is destroyed.
+            scope.$on('$destroy', stopListening);
+            
+        }
 
         var directive = {
             restrict: 'E',
             replace: true,
             transclude: true,
-            templateUrl: 'views/components/umb-dropdown.html'
+            templateUrl: 'views/components/umb-dropdown.html',
+            scope: {
+                onClose: "&"
+            },
+            link: link
         };
 
         return directive;

src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html

@@ -1 +1 @@
-<ul class="dropdown-menu db" ng-transclude></ul>
+<ul class="dropdown-menu db" on-outside-click="close()" ng-transclude></ul>

src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html

@@ -106,8 +106,8 @@
             <span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
             <span class="caret"></span>
           </a>
-          <umb-dropdown class="pull-right" ng-if="vm.page.showStatusFilter" on-outside-click="vm.page.showStatusFilter = false;">
-            <umb-dropdown-item ng-repeat="userState in vm.userStatesFilter" style="padding: 8px 20px 8px 16px;">
+          <umb-dropdown class="pull-right" ng-if="vm.page.showStatusFilter" on-close="vm.page.showStatusFilter = false;">
+            <umb-dropdown-item ng-repeat="userState in vm.userStatesFilter | filter:{ count: '!0', key: '!All'}" style="padding: 8px 20px 8px 16px;">
               <div class="flex items-center">
                 <input id="state-{{$index}}" type="checkbox" ng-model="userState.selected" ng-change="vm.setUserStatesFilter(userState)" style="margin-right: 10px; margin-top: -3px;" />
                 <label for="state-{{$index}}">{{ userState.name }} ({{userState.count}})</label>
@@ -123,7 +123,7 @@
             <span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userGroups) }}</span>
             <span class="caret"></span>
           </a>
-          <umb-dropdown class="pull-right" ng-if="vm.page.showGroupFilter" on-outside-click="vm.page.showGroupFilter = false;">
+          <umb-dropdown class="pull-right" ng-if="vm.page.showGroupFilter" on-close="vm.page.showGroupFilter = false;">
             <umb-dropdown-item ng-repeat="userGroup in vm.userGroups" style="padding: 8px 20px 8px 16px;">
               <div class="flex items-center">
                 <input id="group-{{$index}}" type="checkbox" ng-model="userGroup.selected" ng-change="vm.setUserGroupFilter(userGroup)" style="margin-right: 10px; margin-top: -3px;" />
@@ -140,7 +140,7 @@
             <span class="bold" style="margin-left: 2px;">{{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} </span>
             <span class="caret"></span>
           </a>
-          <umb-dropdown class="pull-right" ng-if="vm.page.showOrderByFilter" on-outside-click="vm.page.showOrderByFilter = false;" umb-keyboard-list>
+          <umb-dropdown class="pull-right" ng-if="vm.page.showOrderByFilter" on-close="vm.page.showOrderByFilter = false;" umb-keyboard-list>
             <umb-dropdown-item ng-repeat="sortData in vm.userSortData">
               <a href="#" ng-click="vm.setOrderByFilter(sortData.key, sortData.direction)" prevent-default>{{sortData.label}}</a>
             </umb-dropdown-item>