[search] Reverted previous change to ClickAwayController and introduced a custom fix to search menu. Fixes #888 (#1109)

platform/commonUI/general/bundle.js

@@ -259,7 +259,7 @@ define([
                     "implementation": ClickAwayController,
                     "depends": [
                         "$document",
-                        "$scope"
+                        "$timeout"
                     ]
                 },
                 {

platform/commonUI/general/src/controllers/ClickAwayController.js

@@ -34,7 +34,7 @@ define(
          * @param $scope the scope in which this controller is active
          * @param $document the document element, injected by Angular
          */
-        function ClickAwayController($document, $scope) {
+        function ClickAwayController($document, $timeout) {
             var self = this;
 
             this.state = false;
@@ -44,7 +44,7 @@ define(
             // `clickaway` action occurs after `toggle` if `toggle` is
             // triggered by a click/mouseup.
             this.clickaway = function () {
-                $scope.$apply(function () {
+                $timeout(function () {
                     self.deactivate();
                 });
             };

platform/commonUI/general/src/controllers/ToggleController.js

@@ -33,6 +33,8 @@ define(
          */
         function ToggleController() {
             this.state = false;
+
+            this.setState = this.setState.bind(this);
         }
 
         /**

platform/commonUI/general/test/controllers/ClickAwayControllerSpec.js

@@ -26,7 +26,7 @@ define(
 
         describe("The click-away controller", function () {
             var mockDocument,
-                mockScope,
+                mockTimeout,
                 controller;
 
             beforeEach(function () {
@@ -34,11 +34,10 @@ define(
                     "$document",
                     ["on", "off"]
                 );
-                mockScope = jasmine.createSpyObj('$scope', ['$apply']);
-
+                mockTimeout = jasmine.createSpy('timeout');
                 controller = new ClickAwayController(
                     mockDocument,
-                    mockScope
+                    mockTimeout
                 );
             });
 
@@ -78,15 +77,18 @@ define(
             });
 
             it("deactivates and detaches listener on document click", function () {
-                var callback, apply;
+                var callback, timeout;
                 controller.setState(true);
                 callback = mockDocument.on.mostRecentCall.args[1];
                 callback();
-                apply = mockScope.$apply.mostRecentCall.args[0];
-                apply();
+                timeout = mockTimeout.mostRecentCall.args[0];
+                timeout();
                 expect(controller.isActive()).toEqual(false);
                 expect(mockDocument.off).toHaveBeenCalledWith("mouseup", callback);
             });
+
+
+
         });
     }
 );

platform/search/res/templates/search-menu.html

@@ -22,13 +22,13 @@
 
 <div ng-controller="SearchMenuController as controller">
 
-    <div class="menu checkbox-menu">
+    <div class="menu checkbox-menu"
+         mct-click-elsewhere="parameters.menuVisible(false)">
         <ul>
             <!-- First element is special - it's a reset option -->
             <li class="search-menu-item special icon-asterisk"
                 title="Select all filters"
                 ng-click="ngModel.checkAll = !ngModel.checkAll; controller.checkAll()">
-
                 <label class="checkbox custom no-text">
                     <input type="checkbox"
                            class="checkbox"

platform/search/res/templates/search.html

@@ -21,7 +21,7 @@
 -->
 <div class="l-flex-col flex-elem grows holder holder-search"  ng-controller="SearchController as controller">
     <div class="search-bar flex-elem"
-         ng-controller="ClickAwayController as toggle"
+         ng-controller="ToggleController as toggle"
          ng-class="{ holder: !(ngModel.input === '' || ngModel.input === undefined) }">
         <input class="search-input"
                type="text"
@@ -30,13 +30,17 @@
         <a class="clear-icon clear-input icon-x-in-circle"
            ng-class="{show: !(ngModel.input === '' || ngModel.input === undefined)}"
            ng-click="ngModel.input = ''; controller.search()"></a>
-        <a class="menu-icon context-available"
+        <!-- To prevent double triggering of clicks on click away, render
+        non-clickable version of the button when menu active-->
+        <a ng-if="!toggle.isActive()" class="menu-icon context-available"
            ng-click="toggle.toggle()"></a>
+        <a ng-if="toggle.isActive()" class="menu-icon context-available"></a>
+        
         <mct-include key="'search-menu'"
                      class="menu-element search-menu-holder"
                      ng-class="{off: !toggle.isActive()}"
                      ng-model="ngModel"
-                     ng-click="toggle.setState(true)">
+                     parameters="{menuVisible: toggle.setState}">
         </mct-include>
     </div>
     <div class="active-filter-display flex-elem holder"