prevent multi dropdowns showing at same time

Pooya Parsa · Pooya Parsa · commit 6118082d9b5c · 2017-03-13T14:53:12.000+03:30
diff --git a/components/dropdown.vue b/components/dropdown.vue
@@ -78,20 +78,27 @@
                 document.documentElement.addEventListener('click', this.clickOut);
             }
         },
+        created() {
+            this.$root.$on('shown::dropdown', el => {
+                if (el !== this) {
+                    this.clickOut();
+                }
+            });
+        },
         methods: {
             toggle() {
                 this.setShow(!this.show);
             },
             setShow(state) {
                 if (this.show === state) {
-                    return;
-                } // Avoid duplicated emits
+                    return; // Avoid duplicated emits
+                }
                 this.show = state;
 
                 if (this.show) {
-                    this.$emit('shown');
+                    this.$root.$emit('shown::dropdown', this);
                 } else {
-                    this.$emit('hidden');
+                    this.$root.$emit('hidden::dropdown', this);
                 }
             },
             clickOut() {
diff --git a/components/nav-item-dropdown.vue b/components/nav-item-dropdown.vue
@@ -52,14 +52,14 @@
         methods: {
             setShow(state) {
                 if (this.show === state) {
-                    return;
-                } // Avoid duplicated emits
+                    return; // Avoid duplicated emits
+                }
                 this.show = state;
 
                 if (this.show) {
-                    this.$root.$emit('shown::dropdown');
+                    this.$root.$emit('shown::dropdown', this);
                 } else {
-                    this.$root.$emit('hidden::dropdown');
+                    this.$root.$emit('hidden::dropdown', this);
                 }
             },
             toggle() {
@@ -70,14 +70,15 @@
             }
         },
         created() {
-            const hub = this.$root;
-            hub.$on('hide::dropdown', () => {
-                this.show = false;
+            this.$root.$on('shown::dropdown', el => {
+                if (el !== this) {
+                    this.clickOut();
+                }
             });
         },
         mounted() {
             if (typeof document !== 'undefined') {
-                document.documentElement.addEventListener('click', this.clickOut, true);
+                document.documentElement.addEventListener('click', this.clickOut);
             }
         }
     };
