feat(quasar): Add use-observer for QMenu to watch changes in target

pdanpdan · Jul 9, 2019 · 4352bab · 4352bab
1 parent eb26103
commit 4352bab
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 2 deletions.
diff --git a/ui/dev/components/form/field.vue b/ui/dev/components/form/field.vue
@@ -183,7 +183,7 @@
             :class="{ 'rotate-180': $refs.menu1 !== void 0 && $refs.menu1.showing === true }"
           />
         </template>
-        <q-popup-proxy fit auto-close ref="menu1">
+        <q-popup-proxy fit auto-close use-observer ref="menu1">
           <q-tree
             :nodes="props"
             default-expand-all
@@ -207,7 +207,7 @@
             :class="{ 'rotate-180': $refs.menu2 !== void 0 && $refs.menu2.showing === true }"
           />
         </template>
-        <q-popup-proxy fit ref="menu2">
+        <q-popup-proxy fit use-observer ref="menu2">
           <q-tree
             :nodes="props"
             default-expand-all

diff --git a/ui/src/components/menu/QMenu.js b/ui/src/components/menu/QMenu.js
@@ -55,6 +55,8 @@ export default Vue.extend({
 
     touchPosition: Boolean,
 
+    useObserver: Boolean,
+
     maxHeight: {
       type: String,
       default: null
@@ -125,6 +127,17 @@ export default Vue.extend({
         ? document.activeElement
         : void 0
 
+      if (this.useObserver === true) {
+        this.touchTargetObserver = new MutationObserver(() => {
+          this.updatePosition()
+        })
+        this.touchTargetObserver.observe(this.anchorEl, {
+          childList: true,
+          characterData: true,
+          subtree: true
+        })
+      }
+
       this.scrollTarget = getScrollTarget(this.anchorEl)
       this.scrollTarget.addEventListener('scroll', this.updatePosition, listenOpts.passive)
       if (this.scrollTarget !== window) {
@@ -202,6 +215,11 @@ export default Vue.extend({
         EscapeKey.pop(this)
         this.__unregisterTree()
 
+        if (this.touchTargetObserver !== void 0) {
+          this.touchTargetObserver.disconnect()
+          this.touchTargetObserver = void 0
+        }
+
         this.scrollTarget.removeEventListener('scroll', this.updatePosition, listenOpts.passive)
         if (this.scrollTarget !== window) {
           window.removeEventListener('scroll', this.updatePosition, listenOpts.passive)

diff --git a/ui/src/components/menu/QMenu.json b/ui/src/components/menu/QMenu.json
@@ -113,6 +113,12 @@
       "extends": "transition",
       "default": "fade",
       "category": "behavior"
+    },
+
+    "use-observer": {
+      "type": "Boolean",
+      "desc": "Use observers to reposition on changes on anchor or menu height",
+      "category": "behavior"
     }
   },