improved tt-select and tt-icon-select

public/plugins/vue/tt-components/tt-select.js

@@ -42,10 +42,12 @@ Vue.component('tt-select', {
 
     mounted() {
         document.addEventListener('click', this.onClickOutside);
+        document.addEventListener('tt-select-open', this.handleGlobalOpen);
     },
 
     beforeDestroy() {
         document.removeEventListener('click', this.onClickOutside);
+        document.removeEventListener('tt-select-open', this.handleGlobalOpen);
     },
 
     computed: {
@@ -98,7 +100,11 @@ Vue.component('tt-select', {
     methods: {
         toggleDropdown() {
             if (this.disabled) return;
-            if (!this.open) this.$emit('focus');
+            if (!this.open) {
+                this.$emit('focus');
+                // Dispatch event that this select is opening
+                document.dispatchEvent(new CustomEvent('tt-select-open', { detail: { id: this._uid } }));
+            }
             this.open = !this.open;
         },
 
@@ -108,6 +114,12 @@ Vue.component('tt-select', {
             }
         },
 
+        handleGlobalOpen(event) {
+            if (event.detail.id !== this._uid) {
+                this.open = false;
+            }
+        },
+
         isSelected(opt) {
             return this.multiple
                 ? Array.isArray(this.selected) && this.selected.includes(opt.value)
@@ -180,12 +192,12 @@ Vue.component('tt-select', {
                     :class="{ 'selected': isSelected(opt), 'disabled': opt.disabled }"
                     @click="selectOption(opt)">
                   <div class="option-label">
-                      <input :type="multiple ? 'checkbox' : 'radio'"
-                             :name="'option-' + _uid"
-                             :value="opt.value"
-                             :checked="isSelected(opt)"
-                             :disabled="opt.disabled">
-                      <span>{{ opt.text }}<span v-if="suffix"> {{ suffix }}</span></span>
+                    <input :type="multiple ? 'checkbox' : 'radio'"
+                           :name="'option-' + _uid"
+                           :value="opt.value"
+                           :checked="isSelected(opt)"
+                           :disabled="opt.disabled">
+                    <span>{{ opt.text }}<span v-if="suffix"> {{ suffix }}</span></span>
                   </div>
                   <i v-if="isSelected(opt)" class="fas fa-check option-checkmark"></i>
                 </li>