From 54ef9a830e0c40ecf99c9c624327597937c5a4bc Mon Sep 17 00:00:00 2001
From: Scott Bell <scott@traclabs.com>
Date: Fri, 28 Jan 2022 22:24:04 +0100
Subject: [PATCH] Show all options when clicking arrow in autocomplete form -
 Mct4578 (#4708)

Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: Nikhil <nikhil.k.mandlik@nasa.gov>
Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
---
 .../components/controls/AutoCompleteField.vue | 37 +++++++++++++------
 1 file changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/api/forms/components/controls/AutoCompleteField.vue b/src/api/forms/components/controls/AutoCompleteField.vue
index 5ca5f61233..edcec70ce1 100644
--- a/src/api/forms/components/controls/AutoCompleteField.vue
+++ b/src/api/forms/components/controls/AutoCompleteField.vue
@@ -65,6 +65,7 @@ export default {
     data() {
         return {
             hideOptions: true,
+            showFilteredOptions: false,
             optionIndex: 0,
             field: this.model.value
         };
@@ -72,16 +73,24 @@ export default {
     computed: {
         filteredOptions() {
             const options = this.optionNames || [];
+            if (this.showFilteredOptions) {
+                return options
+                    .filter(option => {
+                        return option.toLowerCase().indexOf(this.field.toLowerCase()) >= 0;
+                    }).map((option, index) => {
+                        return {
+                            optionId: index,
+                            name: option
+                        };
+                    });
+            }
 
-            return options
-                .filter(option => {
-                    return option.toLowerCase().indexOf(this.field.toLowerCase()) >= 0;
-                }).map((option, index) => {
-                    return {
-                        optionId: index,
-                        name: option
-                    };
-                });
+            return options.map((option, index) => {
+                return {
+                    optionId: index,
+                    name: option
+                };
+            });
         }
     },
     watch: {
@@ -131,11 +140,12 @@ export default {
             this.hideOptions = true;
             this.field = string;
         },
-        showOptions(string) {
+        showOptions() {
             this.hideOptions = false;
             this.optionIndex = 0;
         },
         keyDown($event) {
+            this.showFilteredOptions = true;
             if (this.filteredOptions) {
                 let keyCode = $event.keyCode;
                 switch (keyCode) {
@@ -155,11 +165,14 @@ export default {
         },
         inputClicked() {
             this.autocompleteInputElement.select();
-            this.showOptions(this.autocompleteInputElement.value);
+            this.showOptions();
         },
         arrowClicked() {
+            // if the user clicked the arrow, we want
+            // to show them all the options
+            this.showFilteredOptions = false;
             this.autocompleteInputElement.select();
-            this.showOptions('');
+            this.showOptions();
         },
         optionMouseover(optionId) {
             this.optionIndex = optionId;