fix: QContextMenu does not close when another QContextMenu is opened quasarframework#1852

Author: rstoenescu

dev/components/components/context-menu.vue

@@ -52,6 +52,43 @@
       </div>
       <p class="caption">Visible: {{visible}}</p>
       <pre v-if="event && event.target">{{event.target.innerText}}</pre>
+
+
+      <div class="block-1 q-ma-md">
+        <q-context-menu>
+          <q-list link separator style="min-width: 150px;">
+            <q-item v-close-overlay><q-item-main label="Foo"></q-item-main></q-item>
+            <q-item v-close-overlay><q-item-main label="Bar"></q-item-main></q-item>
+          </q-list>
+        </q-context-menu>
+      </div>
+
+      <div class="block-2 q-ma-md">
+        <q-context-menu>
+          <q-list link separator style="min-width: 150px;">
+            <q-item v-close-overlay><q-item-main label="Foo"></q-item-main></q-item>
+            <q-item v-close-overlay><q-item-main label="Bar"></q-item-main></q-item>
+          </q-list>
+        </q-context-menu>
+      </div>
+
+      <div class="block-3 q-ma-md">
+        <q-context-menu>
+          <q-list link separator style="min-width: 150px;">
+            <q-item v-close-overlay><q-item-main label="Foo"></q-item-main></q-item>
+            <q-item v-close-overlay><q-item-main label="Bar"></q-item-main></q-item>
+          </q-list>
+        </q-context-menu>
+      </div>
+
+      <div class="block-4 q-ma-md">
+        <q-context-menu>
+          <q-list link separator style="min-width: 150px;">
+            <q-item v-close-overlay><q-item-main label="Foo"></q-item-main></q-item>
+            <q-item v-close-overlay><q-item-main label="Bar"></q-item-main></q-item>
+          </q-list>
+        </q-context-menu>
+      </div>
     </div>
   </div>
 </template>
@@ -94,3 +131,27 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus">
+.block-1, .block-2, .block-3, .block-4 {
+  display: inline-block;
+  width: 150px;
+  height: 150px;
+}
+
+.block-1 {
+  background: red;
+}
+
+.block-2 {
+  background: yellow;
+}
+
+.block-3 {
+  background: blue;
+}
+
+.block-4 {
+  background: pink;
+}
+</style>

src/components/context-menu/ContextMenuDesktop.js

@@ -16,8 +16,8 @@ export default {
         anchorClick: false
       },
       on: {
-        show: () => { this.$emit('show', this.event) },
-        hide: (evt) => { this.$emit('hide', this.event, evt) }
+        show: this.__onShow,
+        hide: this.__onHide
       }
     }, this.$slots.default)
   },
@@ -29,25 +29,39 @@ export default {
       if (!evt || this.disable) {
         return
       }
-      this.hide(evt)
       stopAndPrevent(evt)
       /*
         Opening with a timeout for
         Firefox workaround
        */
       setTimeout(() => {
-        this.event = evt
-        this.$refs.popover.show(evt)
+        if (this.$refs.popover) {
+          this.event = evt
+          this.$refs.popover.show(evt)
+        }
       }, 100)
+    },
+    __bodyHide (evt) {
+      if (!this.$el.contains(evt.target)) {
+        this.hide(evt)
+      }
+    },
+    __onShow () {
+      document.body.addEventListener('contextmenu', this.__bodyHide, true)
+      document.body.addEventListener('click', this.__bodyHide, true)
+      this.$emit('show', this.event)
+    },
+    __onHide (evt) {
+      document.body.addEventListener('contextmenu', this.__bodyHide, true)
+      document.body.addEventListener('click', this.__bodyHide, true)
+      this.$emit('hide', this.event, evt)
     }
   },
   mounted () {
     this.target = this.$refs.popover.$el.parentNode
     this.target.addEventListener('contextmenu', this.show)
-    this.target.addEventListener('click', this.hide)
   },
   beforeDestroy () {
-    this.target.removeEventListener('contexmenu', this.show)
-    this.target.removeEventListener('click', this.hide)
+    this.target.removeEventListener('contextmenu', this.show)
   }
 }