[Autocomplete] Hide options if clicked elsewhere.

platform/forms/bundle.js

@@ -24,6 +24,7 @@ define([
     "./src/MCTForm",
     "./src/MCTToolbar",
     "./src/MCTControl",
+    "../commonUI/general/src/directives/MCTClickElsewhere",
     "./src/controllers/AutocompleteController",
     "./src/controllers/DateTimeController",
     "./src/controllers/CompositeController",
@@ -46,6 +47,7 @@ define([
     MCTForm,
     MCTToolbar,
     MCTControl,
+    MCTClickElsewhere,
     AutocompleteController,
     DateTimeController,
     CompositeController,
@@ -86,6 +88,13 @@ define([
                         "templateLinker",
                         "controls[]"
                     ]
+                },
+                {
+                    "key": "mctClickElsewhere",
+                    "implementation": MCTClickElsewhere,
+                    "depends": [
+                        "$document"
+                    ]
                 }
             ],
             "controls": [
@@ -168,6 +177,13 @@ define([
                         "$scope",
                         "dialogService"
                     ]
+                },
+                {
+                    "key": "mctClickElsewhere",
+                    "implementation": MCTClickElsewhere,
+                    "depends": [
+                        "$document"
+                    ]
                 }
             ]
         }

platform/forms/res/templates/controls/autocomplete.html

@@ -30,7 +30,8 @@
     <span class="icon-arrow-down"></span>
     <div class="autocompleteOptions"
          onload="hideOptions = false"
-         ng-hide="hideOptions">
+         ng-hide="hideOptions"
+         mct-click-elsewhere="hideOptions = true">
         <ul>  
             <li ng-repeat="opt in filteredOptions"
                 ng-click="fillInput(opt.name)"