diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js
index f91742785a..d6006114a6 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js
+++ b/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
Added in versions 7.7.0: Use this component to render a dropdown menu.
@@ -18,10 +19,9 @@
action="vm.toggle()">
-
+
+ ng-repeat="item in vm.items">
{{ item.name }}
@@ -75,18 +75,53 @@
{@link umbraco.directives.directive:umbKeyboardList umbKeyboardList}
+@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;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html
index 3410665f4a..141793f6b1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
index 167ebcc221..acd2864320 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
@@ -106,8 +106,8 @@
{{ vm.getFilterName(vm.userStatesFilter) }}
-
-
+
+