From 3870266131ad792ec292038b72d5cac03d3f8a1d Mon Sep 17 00:00:00 2001
From: Dhrubomoy Das Gupta <dhrubo_moy@yahoo.com>
Date: Tue, 6 Jun 2017 18:55:16 -0400
Subject: [PATCH] [Autocomplete] Clicking the arrow will display the entire
 list of timezones

This change is based on the  following code review:
- Display the entire list of timezones, regardless of what's currently entered.
- As soon as the user typed (or deleted chars in the input) then that filtration would take over the list display
---
 .../general/res/sass/controls/_controls.scss  |  1 +
 platform/forms/bundle.js                      |  3 ++-
 .../res/templates/controls/autocomplete.html  |  8 +++---
 .../src/controllers/AutocompleteController.js | 26 +++++++++++++------
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss
index a826466ac4..b54201e16c 100644
--- a/platform/commonUI/general/res/sass/controls/_controls.scss
+++ b/platform/commonUI/general/res/sass/controls/_controls.scss
@@ -308,6 +308,7 @@ textarea.lg { position: relative; height: 300px; }
         top: 8px;
         left: 210px;
         font-size: 10px;
+        cursor: pointer;
     }
     .autocompleteOptions {
         border: 1px solid $colorFormLines;
diff --git a/platform/forms/bundle.js b/platform/forms/bundle.js
index 7eafc46441..fcd52c0b3c 100644
--- a/platform/forms/bundle.js
+++ b/platform/forms/bundle.js
@@ -152,7 +152,8 @@ define([
                     "key": "AutocompleteController",
                     "implementation": AutocompleteController,
                     "depends": [
-                        "$scope"
+                        "$scope",
+                        "$element"
                     ]
                 },
                 {
diff --git a/platform/forms/res/templates/controls/autocomplete.html b/platform/forms/res/templates/controls/autocomplete.html
index b0e4c5db3b..e64085fa4a 100644
--- a/platform/forms/res/templates/controls/autocomplete.html
+++ b/platform/forms/res/templates/controls/autocomplete.html
@@ -21,13 +21,15 @@
 -->
 
 <div ng-controller="AutocompleteController"
-     class='form-control autocomplete' >  
-    <input type="text"
+     class='form-control autocomplete'>
+    <input class="autocompleteInput"
+           type="text"
            ng-model="ngModel[field]"
            ng-change="filterOptions(ngModel[field])"
            ng-click="inputClicked($event)"
            ng-keydown="keyDown($event)"/>
-    <span class="icon-arrow-down"></span>
+    <span class="icon-arrow-down"
+          ng-click="arrowClicked()"></span>
     <div class="autocompleteOptions"
          onload="hideOptions = false"
          ng-hide="hideOptions"
diff --git a/platform/forms/src/controllers/AutocompleteController.js b/platform/forms/src/controllers/AutocompleteController.js
index 48423db899..fa26788e9d 100644
--- a/platform/forms/src/controllers/AutocompleteController.js
+++ b/platform/forms/src/controllers/AutocompleteController.js
@@ -30,13 +30,13 @@ define(
          * @memberof platform/forms
          * @constructor
          */
-        function AutocompleteController($scope) {
+        function AutocompleteController($scope, $element) {
 
             var key = {
-                down: 40,
-                up: 38,
-                enter: 13
-            }
+                    down: 40,
+                    up: 38,
+                    enter: 13
+                }
 
             if($scope.options[0].name) {
                 // If "options" include name, value pair
@@ -73,6 +73,12 @@ define(
                 }
             }
 
+            function showOptions(string) {
+                $scope.hideOptions = false;
+                $scope.filterOptions(string);
+                $scope.optionIndex = 0;
+            }
+
             $scope.keyDown = function($event) {
                 if($scope.filteredOptions) {
                     var keyCode = $event.keyCode;
@@ -109,9 +115,13 @@ define(
             $scope.inputClicked = function($event) {
                 var target = $event.target;
                 target.select();
-                $scope.hideOptions = false;
-                $scope.filterOptions(target.value);
-                $scope.optionIndex = 0;
+                showOptions(target.value);
+            }
+
+            $scope.arrowClicked = function() {
+                var autocompleteInputElement = $element[0].getElementsByClassName('autocompleteInput')[0];
+                autocompleteInputElement.select();
+                showOptions('');
             }
             
             $scope.fillInput = function(string) {