fix(VMenu): improve position when using offset, width and attach props (

#6193) * fix(VMenu): apply correct left position with attach using attach/max-width/left/offset-x causes menu to not be placed correctly * fix(VMenu): update totalWidth calculation fixes #5498 * test(menuable): fix unit tests
vuetifyjs · Jan 18, 2019 · bfad3d8 · bfad3d8
1 parent c38d1d9
commit bfad3d8
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/packages/vuetify/src/components/VMenu/VMenu.js b/packages/vuetify/src/components/VMenu/VMenu.js
@@ -68,12 +68,12 @@ export default Vue.extend({
     disabled: Boolean,
     fullWidth: Boolean,
     maxHeight: { default: 'auto' },
-    offsetX: Boolean,
-    offsetY: Boolean,
     openOnClick: {
       type: Boolean,
       default: true
     },
+    offsetX: Boolean,
+    offsetY: Boolean,
     openOnHover: Boolean,
     origin: {
       type: String,

diff --git a/packages/vuetify/src/mixins/menuable.js b/packages/vuetify/src/mixins/menuable.js
@@ -110,9 +110,14 @@ export default Vue.extend({
       const activatorLeft = (this.isAttached ? a.offsetLeft : a.left) || 0
       const minWidth = Math.max(a.width, c.width)
       let left = 0
-
       left += this.left ? activatorLeft - (minWidth - a.width) : activatorLeft
-      if (this.offsetX) left += this.left ? -a.width : a.width
+      if (this.offsetX) {
+        const maxWidth = isNaN(this.maxWidth)
+          ? a.width
+          : Math.min(a.width, this.maxWidth)
+
+        left += this.left ? -maxWidth : a.width
+      }
       if (this.nudgeLeft) left -= parseInt(this.nudgeLeft)
       if (this.nudgeRight) left += parseInt(this.nudgeRight)
 
@@ -191,7 +196,7 @@ export default Vue.extend({
         this.dimensions.content.width,
         parsedMaxWidth
       )
-      const totalWidth = left + maxWidth
+      const totalWidth = left + this.dimensions.activator.width
       const availableWidth = totalWidth - innerWidth
 
       if ((!this.left || this.right) && availableWidth > 0) {

diff --git a/packages/vuetify/test/unit/mixins/menuable.spec.js b/packages/vuetify/test/unit/mixins/menuable.spec.js
@@ -31,4 +31,33 @@ test('menuable.js', ({ mount }) => {
     await wrapper.vm.$nextTick()
     expect(sneakPeek).toHaveBeenCalled()
   })
+
+  it('should apply maxWidth in left calculations when offset', async () => {
+    const wrapper = mount({
+      mixins: [Menuable],
+      props: {
+        offsetY: Boolean,
+        offsetX: Boolean
+      },
+      render: h => h('div')
+    }, {
+      propsData: {
+        attach: true,
+        left: true,
+        offsetX: true,
+        maxWidth: 200
+      }
+    })
+
+    wrapper.setData({
+      dimensions: {
+        activator: { width: 300 },
+        content: { width: 138 }
+      }
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.computedLeft).toBe(-200)
+  })
 })