feat(QDialog): don't close modal when mouse clicking on backdrop if a menu is open (make it work the same way as with touch) (quasarframework#8045)

* feat(QDialog): don't close modal when mouse clicking on backdrop if a menu is open (make it work the same way as with touch)

* Update event.js

* Update event.js

Co-authored-by: Razvan Stoenescu <razvan.stoenescu@gmail.com>

Author: pdanpdan

ui/src/components/menu/QMenu.js

@@ -9,7 +9,7 @@ import AttrsMixin from '../../mixins/attrs.js'
 
 import ClickOutside from './ClickOutside.js'
 import { getScrollTarget } from '../../utils/scroll.js'
-import { create, stop, position, stopAndPrevent } from '../../utils/event.js'
+import { create, stop, position, stopAndPreventClick } from '../../utils/event.js'
 import EscapeKey from '../../utils/escape-key.js'
 
 import { slot } from '../../utils/slot.js'
@@ -304,7 +304,7 @@ export default Vue.extend({
           // prevent click if it's on a dialog backdrop
           targetClassList.contains('q-dialog__backdrop')
         ) {
-          stopAndPrevent(e)
+          stopAndPreventClick(e)
         }
         return true
       }

ui/src/utils/event.js

@@ -110,6 +110,19 @@ export function stopAndPrevent (e) {
   e.stopPropagation()
 }
 
+export function stopAndPreventClick (evt) {
+  stopAndPrevent(evt)
+
+  if (evt.type === 'mousedown') {
+    const handler = e => {
+      e.target === evt.target && stopAndPrevent(e)
+      document.removeEventListener('click', handler, listenOpts.notPassiveCapture)
+    }
+
+    document.addEventListener('click', handler, listenOpts.notPassiveCapture)
+  }
+}
+
 export function preventDraggable (el, status) {
   if (el === void 0 || (status === true && el.__dragPrevented === true)) {
     return