From b2fa7ea475216d8ba8a0ea7048ab6cdd3d567caa Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 19 Sep 2018 16:01:12 +0200
Subject: [PATCH] close on outside click and escape

---
 .../application/umbsearch.directive.js          | 17 +++++++++--------
 .../src/controllers/main.controller.js          |  4 ++++
 .../components/application/umb-search.html      |  2 +-
 src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml |  2 +-
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js
index 091a361a0d..de6d3b27a0 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/application/umbsearch.directive.js
@@ -20,14 +20,12 @@
         vm.$onInit = onInit;
         vm.$onDestroy = onDestroy;
         vm.search = search;
+        vm.handleKeyUp = handleKeyUp;
         vm.closeSearch = closeSearch;
 
         function onInit() {
-
             vm.searchResults = [];
             vm.hasResults = false;
-
-            console.log("init search thingy");
             backdropService.open();
         }
 
@@ -35,6 +33,13 @@
             backdropService.close();
         }
 
+        function handleKeyUp(event) {
+            // esc
+            if(event.keyCode === 27) {
+                closeSearch();
+            }
+        }
+
         /**
          * Used to proxy a callback
          */
@@ -49,11 +54,9 @@
          * @param {string} searchQuery
          */
         function search(searchQuery) {
-            console.log(searchQuery);
             if(searchQuery.length > 0) {
                 var search = {"term": searchQuery};
                 searchService.searchAll(search).then(function(result){
-                
                     //result is a dictionary of group Title and it's results
                     var filtered = {};
                     _.each(result, function (value, key) {
@@ -61,12 +64,10 @@
                             filtered[key] = value;
                         }
                     });
-
+                    // bind to view model
                     vm.searchResults = filtered;
                     // check if search has results
                     vm.hasResults = Object.keys(vm.searchResults).length > 0;
-                    console.log("results", vm.searchResults);
-                    console.log("has results", vm.hasResults);
                 });
 
             } else {
diff --git a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
index f4517dd41a..a10943c17e 100644
--- a/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
@@ -43,6 +43,10 @@ function MainController($scope, $location, appState, treeService, notificationsS
         eventsService.emit("app.closeDialogs", event);
     };
 
+    $scope.closeSearch = function() {
+        appState.setSearchState("show", false);
+    };
+
     var evts = [];
 
     //when a user logs out or timesout
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html
index 55b1b91d18..903680458c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-search.html
@@ -1,5 +1,5 @@
 
-<div class="umb-search" on-outside-click="vm.closeSearch()">
+<div class="umb-search" on-outside-click="vm.closeSearch()" ng-keyup="vm.handleKeyUp($event)">
 
     <div class="flex items-center">
         <i class="umb-search-input-icon icon-search"></i>
diff --git a/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml b/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml
index f26ba39143..83fc836841 100644
--- a/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml
+++ b/src/Umbraco.Web.UI/Umbraco/Views/Default.cshtml
@@ -88,7 +88,7 @@
         <!-- help dialog controller by the help button - this also forces the backoffice UI to shift 400px  -->
         <umb-drawer data-element="drawer" ng-if="drawer.show" model="drawer.model" view="drawer.view"></umb-drawer>
 
-        <umb-search ng-if="search.show"></umb-search>
+        <umb-search ng-if="search.show" on-close="closeSearch()"></umb-search>
 
     </div>