[clock] Timezone dropdown will collapse when clicked outside or on dropdown icon again (#4956)

* Fix timezone dropdown collapse issue

* Dropdown should collapse when click outside

* Fix Lint error

* add e2e test for autocomplete

* updates based of code review

* Typo fixed

* Modification based on review

Co-authored-by: Scott Bell <scott@traclabs.com>

e2e/tests/example/generator/Clock.e2e.spec.js

@@ -0,0 +1,66 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/*
+This test suite is dedicated to tests which verify the basic operations surrounding Clock.
+*/
+
+const { test, expect } = require('@playwright/test');
+
+test.describe('Clock Generator', () => {
+
+    test('Timezone dropdown will collapse when clicked outside or on dropdown icon again', async ({ page }) => {
+        test.info().annotations.push({
+            type: 'issue',
+            description: 'https://github.com/nasa/openmct/issues/4878'
+        });
+        //Go to baseURL
+        await page.goto('/', { waitUntil: 'networkidle' });
+
+        //Click the Create button
+        await page.click('button:has-text("Create")');
+
+        // Click Clock
+        await page.click('text=Clock');
+
+        // Click .icon-arrow-down
+        await page.locator('.icon-arrow-down').click();
+        //verify if the autocomplete dropdown is visible
+        await expect(page.locator(".optionPreSelected")).toBeVisible();
+        // Click .icon-arrow-down
+        await page.locator('.icon-arrow-down').click();
+
+        // Verify clicking on the autocomplete arrow collapses the dropdown
+        await expect(page.locator(".optionPreSelected")).not.toBeVisible();
+
+        // Click timezone input to open dropdown
+        await page.locator('.autocompleteInput').click();
+        //verify if the autocomplete dropdown is visible
+        await expect(page.locator(".optionPreSelected")).toBeVisible();
+
+        // Verify clicking outside the autocomplete dropdown collapses it
+        await page.locator('text=Timezone').click();
+        // Verify clicking on the autocomplete arrow collapses the dropdown
+        await expect(page.locator(".optionPreSelected")).not.toBeVisible();
+
+    });
+});

src/api/forms/FormController.js

@@ -65,10 +65,11 @@ export default class FormControl {
      */
     _getControlViewProvider(control) {
         const self = this;
+        let rowComponent;
 
         return {
             show(element, model, onChange) {
-                const rowComponent = new Vue({
+                rowComponent = new Vue({
                     el: element,
                     components: {
                         FormControlComponent: DEFAULT_CONTROLS_MAP[control]
@@ -86,6 +87,9 @@ export default class FormControl {
                 });
 
                 return rowComponent;
+            },
+            destroy() {
+                rowComponent.$destroy();
             }
         };
     }

src/api/forms/components/controls/AutoCompleteField.vue

@@ -22,17 +22,19 @@
 
 <template>
 <div class="form-control autocomplete">
-    <input
-        v-model="field"
-        class="autocompleteInput"
-        type="text"
-        @click="inputClicked()"
-        @keydown="keyDown($event)"
-    >
-    <span
-        class="icon-arrow-down"
-        @click="arrowClicked()"
-    ></span>
+    <span class="autocompleteInputAndArrow">
+        <input
+            v-model="field"
+            class="autocompleteInput"
+            type="text"
+            @click="inputClicked()"
+            @keydown="keyDown($event)"
+        >
+        <span
+            class="icon-arrow-down"
+            @click="arrowClicked()"
+        ></span>
+    </span>
     <div
         class="autocompleteOptions"
         @blur="hideOptions = true"
@@ -108,10 +110,21 @@ export default {
 
                 this.$emit('onChange', data);
             }
+        },
+        hideOptions(newValue) {
+            if (!newValue) {
+                // adding a event listener when the hideOpntions is false (dropdown is visible)
+                // handleoutsideclick can collapse the dropdown when clicked outside autocomplete
+                document.body.addEventListener('click', this.handleOutsideClick);
+            } else {
+                //removing event listener when hideOptions become true (dropdown is collapsed)
+                document.body.removeEventListener('click', this.handleOutsideClick);
+            }
         }
     },
     mounted() {
         this.options = this.model.options;
+        this.autocompleteInputAndArrow = this.$el.getElementsByClassName('autocompleteInputAndArrow')[0];
         this.autocompleteInputElement = this.$el.getElementsByClassName('autocompleteInput')[0];
         if (this.options[0].name) {
         // If "options" include name, value pair
@@ -123,6 +136,9 @@ export default {
             this.optionNames = this.options;
         }
     },
+    destroyed() {
+        document.body.removeEventListener('click', this.handleOutsideClick);
+    },
     methods: {
         decrementOptionIndex() {
             if (this.optionIndex === 0) {
@@ -176,7 +192,21 @@ export default {
             // to show them all the options
             this.showFilteredOptions = false;
             this.autocompleteInputElement.select();
-            this.showOptions();
+
+            if (this.hideOptions) {
+                this.showOptions();
+            } else {
+                this.hideOptions = true;
+            }
+
+        },
+        handleOutsideClick(event) {
+            // if click event is detected outside autocomplete (both input & arrow) while the
+            // dropdown is visible, this will collapse the dropdown.
+            const clickedInsideAutocomplete = this.autocompleteInputAndArrow.contains(event.target);
+            if (!clickedInsideAutocomplete && !this.hideOptions) {
+                this.hideOptions = true;
+            }
         },
         optionMouseover(optionId) {
             this.optionIndex = optionId;