remember focus from before opening search

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

@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function AppHeaderDirective(eventsService, appState, userService) {
+    function AppHeaderDirective(eventsService, appState, userService, focusService) {
 
         function link(scope, el, attr, ctrl) {
 
@@ -54,7 +54,9 @@
                     }
                 });
             }));
-
+            
+            scope.rememberFocus = focusService.rememberFocus;
+            
             scope.searchClick = function() {
                 var showSearch = appState.getSearchState("show");
                 appState.setSearchState("show", !showSearch);
@@ -101,4 +103,4 @@
 
     angular.module("umbraco.directives").directive("umbAppHeader", AppHeaderDirective);
 
-})();
+})();

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

@@ -13,7 +13,7 @@
         }
     };
     
-    function umbSearchController($timeout, backdropService, searchService) {
+    function umbSearchController($timeout, backdropService, searchService, focusService) {
 
         var vm = this;
 
@@ -25,6 +25,9 @@
         vm.handleKeyUp = handleKeyUp;
         vm.closeSearch = closeSearch;
         vm.focusSearch = focusSearch;
+        
+        //we need to capture the focus before this element is initialized.
+        vm.focusBeforeOpening = focusService.lastKnownFocus;
 
         function onInit() {
             vm.searchQuery = "";
@@ -70,6 +73,10 @@
          * @param {object} event
          */
         function handleKeyUp(event) {
+            
+            event.stopPropagation();
+            event.preventDefault();
+            
             // esc
             if(event.keyCode === 27) {
                 closeSearch();
@@ -80,6 +87,9 @@
          * Used to proxy a callback
          */
         function closeSearch() {
+            if(vm.focusBeforeOpening) {
+                vm.focusBeforeOpening.focus();
+            }
             if(vm.onClose) {
                 vm.onClose();
             }
@@ -115,4 +125,4 @@
 
     angular.module('umbraco.directives').component('umbSearch', umbSearch);
 
-})();
+})();

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

@@ -4,7 +4,7 @@
 **/
 
 angular.module("umbraco.directives")
-    .directive('hotkey', function($window, keyboardService, $log) {
+    .directive('hotkey', function($window, keyboardService, $log, focusService) {
 
         return function(scope, el, attrs) {
 
@@ -28,7 +28,9 @@ angular.module("umbraco.directives")
                     }
 
                     keyboardService.bind(keyCombo, function() {
-
+                        
+                        focusService.rememberFocus();
+                        
                         var element = $(el);
                         var activeElementType = document.activeElement.tagName;
                         var clickableElements = ["A", "BUTTON"];
@@ -47,6 +49,8 @@ angular.module("umbraco.directives")
                                 } else {
                                     element.trigger("click");
                                 }
+                                
+                                keyboardService.stopPropagation()
 
                             }
 

src/Umbraco.Web.UI.Client/src/common/services/focus.service.js

@@ -0,0 +1,72 @@
+/**
+ @ngdoc service
+ * @name umbraco.services.focusService
+ *
+ * @description
+ * <b>Added in Umbraco 8.1</b>. Application-wide service for focus related stuff.
+ * 
+ */
+
+(function () {
+    "use strict";
+
+    function focusService() {
+        
+        
+        function focusInApp(e) {
+            service.currentFocus = e.target;
+        }
+        document.addEventListener('focusin', focusInApp);
+        
+        
+        var service = {
+            currentFocus: null,
+            
+            /**
+    		 * @ngdoc property
+             * @name umbraco.services.focusService#lastKnownFocus
+		     * @propertyOf umbraco.services.focusService
+             *
+             * @description
+             * A element set to be remembered, the directive using this should store the value of this to make sure that its not changed white using that directive.
+             * This variable is avaiable for directives that are not able to figure out the focused element on init, and there this service will help remembering it untill the directive is initialized.
+             * 
+             */
+            lastKnownFocus: null,
+            
+            /**
+             * @ngdoc function
+             * @name umbraco.services.focusService#rememberFocus
+             * @methodOf umbraco.services.focusService
+             * @function
+             *
+             * @description
+             * Call this before a new focus is begin set, to be able to return to the focus before a given scenario.
+             * 
+             */
+            rememberFocus: function() {
+                service.lastKnownFocus = service.currentFocus;
+            },
+            
+            /**
+             * @ngdoc function
+             * @name umbraco.services.focusService#setLastKnownFocus
+             * @methodOf umbraco.services.focusService
+             * @function
+             *
+             * @description
+             * Overwrite the element remembered as the last known element in focus.
+             * 
+             */
+            setLastKnownFocus: function(element) {
+                service.lastKnownFocus = element;
+            }
+        };
+
+        return service;
+
+    }
+    
+    angular.module("umbraco.services").factory("focusService", focusService);
+
+})();

src/Umbraco.Web.UI.Client/src/controllers/main.controller.js

@@ -8,7 +8,9 @@
  * The main application controller
  * 
  */
-function MainController($scope, $location, appState, treeService, notificationsService, userService, historyService, updateChecker, assetsService, eventsService, tmhDynamicLocale, localStorageService, editorService, overlayService) {
+function MainController($scope, $location, appState, treeService, notificationsService, 
+    userService, historyService, updateChecker, assetsService, eventsService, 
+    tmhDynamicLocale, localStorageService, editorService, overlayService, focusService) {
 
     //the null is important because we do an explicit bool check on this in the view
     $scope.authenticated = null;

src/Umbraco.Web.UI.Client/src/views/components/application/umb-app-header.html

@@ -1,7 +1,7 @@
 <div>
 
     <div class="umb-app-header">
-        
+
         <umb-sections
             ng-if="authenticated"
             sections="sections">
@@ -10,7 +10,7 @@
         <div class="flex items-center">
             <ul class="umb-app-header__actions">
                 <li data-element="global-search" class="umb-app-header__action">
-                    <a href="#" hotkey="ctrl+space" ng-click="searchClick()" prevent-default style="font-size: 20px;">
+                    <a href="#" hotkey="ctrl+space" ng-click="searchClick()" ng-mousedown="rememberFocus()" prevent-default style="font-size: 20px;">
                         <i class="umb-app-header__action-icon icon-search"></i>
                     </a>
                 </li>
@@ -44,4 +44,3 @@
     </umb-overlay>
 
 </div>
-