diff --git a/packages/vuetify/src/components/VMenu/VMenu.js b/packages/vuetify/src/components/VMenu/VMenu.js index 95e176ec2df..97bc6952511 100644 --- 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 index e748b201f1f..1f18535bbde 100644 --- 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 index 325dce36b02..f5168eb3996 100644 --- 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) + }) })