From ac6d9858460be54448fbcd326f6a6b5a80785866 Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Mon, 27 Jun 2016 11:16:46 -0400
Subject: [PATCH 1/2] get click to close working for search bars

---
 awx/ui/client/src/search/tagSearch.block.less  |  9 +++++++++
 .../client/src/search/tagSearch.controller.js  | 18 +++++++++++++++++-
 .../client/src/search/tagSearch.partial.html   |  5 ++---
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/awx/ui/client/src/search/tagSearch.block.less b/awx/ui/client/src/search/tagSearch.block.less
index 118bec4dfb..15f7dc7d48 100644
--- a/awx/ui/client/src/search/tagSearch.block.less
+++ b/awx/ui/client/src/search/tagSearch.block.less
@@ -5,6 +5,15 @@
     min-height: 45px;
 }
 
+.TagSearch-clickToClose {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1040;
+}
+
 .TagSearch-bar {
     display: flex;
     padding: 0;
diff --git a/awx/ui/client/src/search/tagSearch.controller.js b/awx/ui/client/src/search/tagSearch.controller.js
index a22bcfaf8f..815761393e 100644
--- a/awx/ui/client/src/search/tagSearch.controller.js
+++ b/awx/ui/client/src/search/tagSearch.controller.js
@@ -17,6 +17,13 @@ export default ['$scope', 'Refresh', 'tagSearchService',
         $scope.toggleTypeDropdown = function() {
             if ($scope.searchTypes.length > 1) {
                 $scope.showTypeDropdown = !$scope.showTypeDropdown;
+                if ($scope.showTypeDropdown) {
+                    $("body").append("<div class='TagSearch-clickToClose'></div>");
+                    $(".TagSearch-clickToClose").on("click", function() {
+                        $scope.showTypeDropdown = false;
+                        $(".TagSearch-clickToClose").remove();
+                    });
+                }
             }
         };
 
@@ -24,6 +31,7 @@ export default ['$scope', 'Refresh', 'tagSearchService',
         $scope.setSearchType = function($event, type) {
             $scope.currentSearchType = type;
             $scope.showTypeDropdown = false;
+            $(".TagSearch-clickToClose").remove();
             $event.stopPropagation();
         };
 
@@ -33,7 +41,14 @@ export default ['$scope', 'Refresh', 'tagSearchService',
             $scope
                 .showCurrentSearchDropdown = !$scope
                     .showCurrentSearchDropdown;
-        };
+            if ($scope.showCurrentSearchDropdown) {
+                $("body").append("<div class='TagSearch-clickToClose'></div>");
+                $(".TagSearch-clickToClose").on("click", function() {
+                    $scope.showCurrentSearchDropdown = false;
+                    $(".TagSearch-clickToClose").remove();
+                });
+            }
+};
 
         $scope.updateSearch = function(tags) {
             var iterator = $scope.iterator;
@@ -106,5 +121,6 @@ export default ['$scope', 'Refresh', 'tagSearchService',
             $scope.newSearchTag = null;
             $scope.showTypeDropdown = false;
             $scope.showCurrentSearchDropdown = false;
+            $(".TagSearch-clickToClose").remove();
         };
     }];
diff --git a/awx/ui/client/src/search/tagSearch.partial.html b/awx/ui/client/src/search/tagSearch.partial.html
index cceafa7b37..fed6022171 100644
--- a/awx/ui/client/src/search/tagSearch.partial.html
+++ b/awx/ui/client/src/search/tagSearch.partial.html
@@ -10,7 +10,7 @@
                 </span>
                 <i class="TagSearch-selectDownIcon fa fa-angle-down"
                     ng-hide="searchTypes.length === 1"></i>
-                <div aw-click-off="showTypeDropdown" class="TagSearch-dropdownContainer
+                <div class="TagSearch-dropdownContainer
                     TagSearch-dropdownContainer--searchTypes"
                     ng-show="showTypeDropdown">
                     <div class="TagSearch-dropdownItem"
@@ -43,8 +43,7 @@
                     <i class="TagSearch-selectDownIcon
                         fa fa-angle-down">
                     </i>
-                    <div aw-click-off="showCurrentSearchDropdown"
-                        class="TagSearch-dropdownContainer
+                    <div class="TagSearch-dropdownContainer
                         TagSearch-dropdownContainer--typeOptions"
                         ng-show="showCurrentSearchDropdown &&
                             currentSearchType.type === 'select'">

From 2229d60c4ec3bb43466515509e4ebe2297540285 Mon Sep 17 00:00:00 2001
From: John Mitchell <jlmitch5@ncsu.edu>
Date: Mon, 27 Jun 2016 11:30:16 -0400
Subject: [PATCH 2/2] speed up toggle by manually applying toggle

---
 awx/ui/client/src/search/tagSearch.controller.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/awx/ui/client/src/search/tagSearch.controller.js b/awx/ui/client/src/search/tagSearch.controller.js
index 815761393e..2a1b8e3311 100644
--- a/awx/ui/client/src/search/tagSearch.controller.js
+++ b/awx/ui/client/src/search/tagSearch.controller.js
@@ -20,7 +20,9 @@ export default ['$scope', 'Refresh', 'tagSearchService',
                 if ($scope.showTypeDropdown) {
                     $("body").append("<div class='TagSearch-clickToClose'></div>");
                     $(".TagSearch-clickToClose").on("click", function() {
-                        $scope.showTypeDropdown = false;
+                        $scope.$apply(function() {
+                            $scope.showTypeDropdown = false;
+                        });
                         $(".TagSearch-clickToClose").remove();
                     });
                 }
@@ -44,7 +46,9 @@ export default ['$scope', 'Refresh', 'tagSearchService',
             if ($scope.showCurrentSearchDropdown) {
                 $("body").append("<div class='TagSearch-clickToClose'></div>");
                 $(".TagSearch-clickToClose").on("click", function() {
-                    $scope.showCurrentSearchDropdown = false;
+                    $scope.$apply(function() {
+                        $scope.showCurrentSearchDropdown = false;
+                    });
                     $(".TagSearch-clickToClose").remove();
                 });
             }