vuetify 2.6.0-beta.0 → 2.6.3

package/src/components/VCombobox/__tests__/VCombobox-multiple.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-statements */
 // Components
 import VCombobox from '../VCombobox'
 
@@ -578,4 +579,116 @@ describe('VCombobox.ts', () => {
 
     expect(change).toHaveBeenLastCalledWith(['bar', 'foo'])
   })
+
+  // example 1 in https://github.com/vuetifyjs/vuetify/issues/14194
+  it('should not point to a result that does not exist as in example 1', async () => {
+    const { wrapper } = createMultipleCombobox({
+      items: ['a', 'aa', 'aaa', 'bar'],
+    })
+
+    const input = wrapper.find('input')
+    const element = input.element as HTMLInputElement
+
+    const listIndexUpdate = jest.fn()
+    wrapper.vm.$on('update:list-index', listIndexUpdate)
+
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    element.value = 'a'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+
+    input.trigger('keydown.down')
+    await wrapper.vm.$nextTick()
+
+    input.trigger('keydown.down')
+    await wrapper.vm.$nextTick()
+
+    input.trigger('keydown.down')
+    await wrapper.vm.$nextTick()
+
+    input.trigger('keydown.down')
+    await wrapper.vm.$nextTick()
+
+    element.value = 'aa'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+    expect(listIndexUpdate.mock.calls.length === 6).toBe(true)
+    expect(listIndexUpdate.mock.calls[0][0]).toBe(-1)
+    expect(listIndexUpdate.mock.calls[1][0]).toBe(0)
+    expect(listIndexUpdate.mock.calls[2][0]).toBe(1)
+    expect(listIndexUpdate.mock.calls[3][0]).toBe(2)
+    expect(listIndexUpdate.mock.calls[4][0]).toBe(3)
+    expect(listIndexUpdate.mock.calls[5][0]).toBe(-1)
+  })
+
+  // example 2 in https://github.com/vuetifyjs/vuetify/issues/14194
+  it('should not change selection on search input as in example 2', async () => {
+    const { wrapper } = createMultipleCombobox({
+      items: ['a', 'aa', 'aaa', 'bar'],
+    })
+
+    const input = wrapper.find('input')
+    const element = input.element as HTMLInputElement
+
+    const listIndexUpdate = jest.fn()
+    wrapper.vm.$on('update:list-index', listIndexUpdate)
+
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    element.value = 'a'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+
+    input.trigger('keydown.down')
+    await wrapper.vm.$nextTick()
+
+    input.trigger('keydown.down')
+    await wrapper.vm.$nextTick()
+
+    input.trigger('keydown.down')
+    await wrapper.vm.$nextTick()
+
+    element.value = 'aa'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+
+    expect(listIndexUpdate.mock.calls.length === 5).toBe(true)
+    expect(listIndexUpdate.mock.calls[0][0]).toBe(-1)
+    expect(listIndexUpdate.mock.calls[1][0]).toBe(0)
+    expect(listIndexUpdate.mock.calls[2][0]).toBe(1)
+    expect(listIndexUpdate.mock.calls[3][0]).toBe(2)
+    expect(listIndexUpdate.mock.calls[4][0]).toBe(1)
+  })
+
+  // example 3 in https://github.com/vuetifyjs/vuetify/issues/14194
+  it('should not point to a result that does not exist as in example 3', async () => {
+    const { wrapper } = createMultipleCombobox({
+      items: ['a', 'aa', 'aaa', 'bar'],
+    })
+
+    const input = wrapper.find('input')
+    const element = input.element as HTMLInputElement
+
+    const listIndexUpdate = jest.fn()
+    wrapper.vm.$on('update:list-index', listIndexUpdate)
+
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    element.value = 'a'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+
+    input.trigger('keydown.down')
+    await wrapper.vm.$nextTick()
+
+    element.value = 'aaaa'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+
+    expect(listIndexUpdate.mock.calls.length === 3).toBe(true)
+    expect(listIndexUpdate.mock.calls[0][0]).toBe(-1)
+    expect(listIndexUpdate.mock.calls[1][0]).toBe(0)
+    expect(listIndexUpdate.mock.calls[2][0]).toBe(-1)
+  })
 })

package/src/components/VCombobox/__tests__/VCombobox.spec.ts

@@ -298,7 +298,7 @@ describe('VCombobox.ts', () => {
     expect(wrapper.vm.internalValue).toBe('')
 
     wrapper.vm.setValue(null)
-    expect(wrapper.vm.internalValue).toBeUndefined()
+    expect(wrapper.vm.internalValue).toBeNull()
 
     wrapper.vm.setValue(undefined)
     expect(wrapper.vm.internalValue).toBeUndefined()
@@ -306,7 +306,7 @@ describe('VCombobox.ts', () => {
     wrapper.setData({ lazySearch: 'foo' })
 
     wrapper.vm.setValue(null)
-    expect(wrapper.vm.internalValue).toBe('foo')
+    expect(wrapper.vm.internalValue).toBeNull()
 
     wrapper.vm.setValue(undefined)
     expect(wrapper.vm.internalValue).toBe('foo')
@@ -321,4 +321,34 @@ describe('VCombobox.ts', () => {
 
     expect(wrapper.vm.$attrs.autocomplete).toBe('on')
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/6607
+  it('should select first row when autoSelectFirst true is applied', async () => {
+    const wrapper = mountFunction({
+      propsData: {
+        autoSelectFirst: true,
+        items: [
+          { text: 'Learn JavaScript', done: false },
+          { text: 'Learn Vue', done: false },
+          { text: 'Play around in JSFiddle', done: true },
+          { text: 'Build something awesome', done: true },
+        ],
+      },
+    })
+
+    const input = wrapper.find('input')
+    const element = input.element as HTMLInputElement
+
+    const listIndexUpdate = jest.fn()
+    wrapper.vm.$on('update:list-index', listIndexUpdate)
+
+    input.trigger('focus')
+    await wrapper.vm.$nextTick()
+    element.value = 'L'
+    input.trigger('input')
+    await wrapper.vm.$nextTick()
+
+    expect(listIndexUpdate.mock.calls.length === 1).toBe(true)
+    expect(listIndexUpdate.mock.calls[0][0]).toBe(0)
+  })
 })

package/src/components/VData/VData.ts

@@ -30,12 +30,10 @@ export default Vue.extend({
     } as PropValidator<Partial<DataOptions>>,
     sortBy: {
       type: [String, Array],
-      default: () => [],
-    } as PropValidator<string | string[]>,
+    } as PropValidator<string | string[] | undefined>,
     sortDesc: {
       type: [Boolean, Array],
-      default: () => [],
-    } as PropValidator<boolean | boolean[]>,
+    } as PropValidator<boolean | boolean[] | undefined>,
     customSort: {
       type: Function,
       default: sortItems,

package/src/components/VDataTable/MobileRow.ts

@@ -27,8 +27,8 @@ export default Vue.extend({
       const value = getObjectValueByPath(props.item, header.value)
 
       const slotName = header.value
-      const scopedSlot = data.scopedSlots && data.scopedSlots[slotName]
-      const regularSlot = computedSlots[slotName]
+      const scopedSlot = data.scopedSlots && data.scopedSlots.hasOwnProperty(slotName) && data.scopedSlots[slotName]
+      const regularSlot = computedSlots.hasOwnProperty(slotName) && computedSlots[slotName]
 
       if (scopedSlot) {
         children.push(scopedSlot({

package/src/components/VDataTable/Row.ts

@@ -30,8 +30,8 @@ export default Vue.extend({
       const value = getObjectValueByPath(props.item, header.value)
 
       const slotName = header.value
-      const scopedSlot = data.scopedSlots && data.scopedSlots[slotName]
-      const regularSlot = computedSlots[slotName]
+      const scopedSlot = data.scopedSlots && data.scopedSlots.hasOwnProperty(slotName) && data.scopedSlots[slotName]
+      const regularSlot = computedSlots.hasOwnProperty(slotName) && computedSlots[slotName]
 
       if (scopedSlot) {
         children.push(...wrapInArray(scopedSlot({

package/src/components/VDataTable/VDataTableHeaderDesktop.ts

@@ -73,7 +73,7 @@ export default mixins(header).extend({
       }
 
       children.push(
-        this.$scopedSlots[header.value]
+        this.$scopedSlots.hasOwnProperty(header.value)
           ? this.$scopedSlots[header.value]!({ header })
           : this.$createElement('span', [header.text])
       )

package/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap

@@ -8312,16 +8312,16 @@ exports[`VDataTable.ts should render with group scoped slot 1`] = `
       </thead>
       <tbody>
         <div>
-          {"group":0,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Jelly bean","calories":375,"fat":0,"carbs":94,"protein":0,"iron":"0%"},{"name":"Lollipop","calories":392,"fat":0.2,"carbs":98,"protein":0,"iron":"2%"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
+          {"group":0,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[false],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Jelly bean","calories":375,"fat":0,"carbs":94,"protein":0,"iron":"0%"},{"name":"Lollipop","calories":392,"fat":0.2,"carbs":98,"protein":0,"iron":"2%"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
         </div>
         <div>
-          {"group":3.9,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
+          {"group":3.9,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[false],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Gingerbread","calories":356,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
         </div>
         <div>
-          {"group":4,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%","class":"test"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
+          {"group":4,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[false],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Frozen Yogurt","calories":159,"fat":6,"carbs":24,"protein":4,"iron":"1%","class":"test"}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
         </div>
         <div>
-          {"group":4.3,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%","class":["test","second"]}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
+          {"group":4.3,"options":{"page":1,"itemsPerPage":5,"sortBy":[],"sortDesc":[false],"groupBy":["protein"],"groupDesc":[false],"mustSort":false,"multiSort":false},"isMobile":true,"items":[{"name":"Ice cream sandwich","calories":237,"fat":9,"carbs":37,"protein":4.3,"iron":"1%","class":["test","second"]}],"headers":[{"text":"Dessert (100g serving)","align":"left","sortable":false,"value":"name"},{"text":"Calories","value":"calories"},{"text":"Fat (g)","value":"fat"},{"text":"Carbs (g)","value":"carbs"},{"text":"Iron (%)","value":"iron"}]}
         </div>
       </tbody>
     </table>

package/src/components/VDialog/VDialog.sass

@@ -7,6 +7,7 @@
   overflow-y: auto
   pointer-events: auto
   transition: .3s map-get($transition, 'fast-in-fast-out')
+  width: 100%
   z-index: inherit
   +elevation($dialog-elevation)
 
@@ -62,7 +63,6 @@
 .v-dialog--fullscreen
   border-radius: 0
   margin: 0
-  width: 100%
   height: 100%
   position: fixed
   overflow-y: auto

package/src/components/VDialog/VDialog.ts

@@ -48,10 +48,7 @@ export default baseMixins.extend({
     disabled: Boolean,
     fullscreen: Boolean,
     light: Boolean,
-    maxWidth: {
-      type: [String, Number],
-      default: 'none',
-    },
+    maxWidth: [String, Number],
     noClickAnimation: Boolean,
     origin: {
       type: String,
@@ -67,10 +64,7 @@ export default baseMixins.extend({
       type: [String, Boolean],
       default: 'dialog-transition',
     },
-    width: {
-      type: [String, Number],
-      default: 'auto',
-    },
+    width: [String, Number],
   },
 
   data () {
@@ -187,8 +181,10 @@ export default baseMixins.extend({
       // Double nextTick to wait for lazy content to be generated
       this.$nextTick(() => {
         this.$nextTick(() => {
-          this.previousActiveElement = document.activeElement as HTMLElement
-          this.$refs.content.focus()
+          if (!this.$refs.content.contains(document.activeElement)) {
+            this.previousActiveElement = document.activeElement as HTMLElement
+            this.$refs.content.focus()
+          }
           this.bind()
         })
       })
@@ -257,8 +253,9 @@ export default baseMixins.extend({
           this.$createElement('div', {
             class: this.contentClasses,
             attrs: {
-              role: 'document',
+              role: 'dialog',
               tabindex: this.isActive ? 0 : undefined,
+              'aria-modal': this.hideOverlay ? undefined : 'true',
               ...this.getScopeIdAttrs(),
             },
             on: { keydown: this.onKeydown },
@@ -304,8 +301,8 @@ export default baseMixins.extend({
       if (!this.fullscreen) {
         data.style = {
           ...data.style as object,
-          maxWidth: this.maxWidth === 'none' ? undefined : convertToUnit(this.maxWidth),
-          width: this.width === 'auto' ? undefined : convertToUnit(this.width),
+          maxWidth: convertToUnit(this.maxWidth),
+          width: convertToUnit(this.width),
         }
       }
 
@@ -322,7 +319,6 @@ export default baseMixins.extend({
           this.attach === true ||
           this.attach === 'attach',
       },
-      attrs: { role: 'dialog' },
     }, [
       this.genActivator(),
       this.genContent(),

package/src/components/VDialog/__tests__/__snapshots__/VDialog.spec.ts.snap

@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`VDialog.ts should only set tabindex if active 1`] = `
-<div role="document"
+<div role="dialog"
+     aria-modal="true"
      class="v-dialog__content"
      style="z-index: 0;"
 >
@@ -13,7 +14,8 @@ exports[`VDialog.ts should only set tabindex if active 1`] = `
 `;
 
 exports[`VDialog.ts should only set tabindex if active 2`] = `
-<div role="document"
+<div role="dialog"
+     aria-modal="true"
      class="v-dialog__content v-dialog__content--active"
      style="z-index: 202; z-index: 202;"
      tabindex="0"
@@ -26,71 +28,51 @@ exports[`VDialog.ts should only set tabindex if active 2`] = `
 `;
 
 exports[`VDialog.ts should render a disabled component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render a eager component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render a fullscreen component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render a persistent component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render a scrollable component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render component and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render component with custom origin and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render component with custom transition and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render component with custom width (max-width) and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;
 
 exports[`VDialog.ts should render component with custom width and match snapshot 1`] = `
-<div role="dialog"
-     class="v-dialog__container"
->
+<div class="v-dialog__container">
 </div>
 `;

package/src/components/VImg/__tests__/VImg.spec.ts

@@ -104,7 +104,7 @@ describe('VImg.ts', () => {
 
     jest.runOnlyPendingTimers()
 
-    expect(error).toHaveBeenCalledTimes(2)
+    expect(error).toHaveBeenCalledTimes(1)
     expect(error).toHaveBeenCalledWith(LOAD_FAILURE_SRC)
   })
 

package/src/components/VItemGroup/VItemGroup.ts

@@ -2,6 +2,7 @@
 import './VItemGroup.sass'
 
 // Mixins
+import Comparable from '../../mixins/comparable'
 import Groupable from '../../mixins/groupable'
 import Proxyable from '../../mixins/proxyable'
 import Themeable from '../../mixins/themeable'
@@ -20,6 +21,7 @@ export type GroupableInstance = InstanceType<typeof Groupable> & {
  }
 
 export const BaseItemGroup = mixins(
+  Comparable,
   Proxyable,
   Themeable
 ).extend({
@@ -83,12 +85,12 @@ export const BaseItemGroup = mixins(
     },
     toggleMethod (): (v: any) => boolean {
       if (!this.multiple) {
-        return (v: any) => this.internalValue === v
+        return (v: any) => this.valueComparator(this.internalValue, v)
       }
 
       const internalValue = this.internalValue
       if (Array.isArray(internalValue)) {
-        return (v: any) => internalValue.includes(v)
+        return (v: any) => internalValue.some(intern => this.valueComparator(intern, v))
       }
 
       return () => false
@@ -114,7 +116,7 @@ export const BaseItemGroup = mixins(
       }
     },
     getValue (item: GroupableInstance, i: number): unknown {
-      return item.value == null || item.value === ''
+      return item.value === undefined
         ? i
         : item.value
     },

package/src/components/VItemGroup/__tests__/VItemGroup.spec.ts

@@ -58,9 +58,9 @@ describe('VItemGroup', () => {
 
     const getValue = wrapper.vm.getValue
 
-    expect(getValue({ value: null }, 0)).toBe(0)
+    expect(getValue({ value: null }, 0)).toBeNull()
     expect(getValue({ value: undefined }, 1)).toBe(1)
-    expect(getValue({ value: '' }, 2)).toBe(2)
+    expect(getValue({ value: '' }, 2)).toBe('')
     expect(getValue({ value: 'foo' }, 'foo')).toBe('foo')
   })
 
@@ -167,6 +167,23 @@ describe('VItemGroup', () => {
     expect(wrapper.vm.toggleMethod(0)).toBe(false)
   })
 
+  it('should correctly be active with objects having different references', () => {
+    const wrapper = mountFunction()
+
+    wrapper.setProps({ value: { a: 1 } })
+    expect(wrapper.vm.toggleMethod({ a: 1 })).toBe(true)
+    expect(wrapper.vm.toggleMethod({ a: 2 })).toBe(false)
+  })
+
+  it('should have a customizable comparator function', () => {
+    const wrapper = mountFunction()
+
+    wrapper.setProps({ valueComparator: (a: any, b: any) => a === b + 1, value: 0 })
+
+    expect(wrapper.vm.toggleMethod(0)).toBe(false)
+    expect(wrapper.vm.toggleMethod(-1)).toBe(true)
+  })
+
   it('should select the first item if mandatory and no value', async () => {
     const wrapper = mountFunction({
       propsData: { mandatory: true },

package/src/components/VList/VListItem.sass

@@ -6,7 +6,7 @@
     color: map-deep-get($material, 'text', 'disabled')
 
   &:not(.v-list-item--active):not(.v-list-item--disabled)
-    color: map-deep-get($material, 'text', 'primary') !important
+    color: map-deep-get($material, 'text', 'primary')
 
   .v-list-item__mask
     color: map-deep-get($material, 'text', 'disabled')
@@ -265,3 +265,4 @@
     -webkit-line-clamp: 2
     -webkit-box-orient: vertical
     display: -webkit-box
+

package/src/components/VList/VListItem.ts

@@ -150,6 +150,12 @@ export default baseMixins.extend<options>().extend({
 
       return attrs
     },
+    toggle () {
+      if (this.to && this.inputValue === undefined) {
+        this.isActive = !this.isActive
+      }
+      this.$emit('change')
+    },
   },
 
   render (h): VNode {
@@ -182,6 +188,6 @@ export default baseMixins.extend<options>().extend({
       })
       : this.$slots.default
 
-    return h(tag, this.setTextColor(this.color, data), children)
+    return h(tag, this.isActive ? this.setTextColor(this.color, data) : data, children)
   },
 })

package/src/components/VList/__tests__/VListItem.spec.ts

@@ -218,4 +218,20 @@ describe('VListItem.ts', () => {
     })
     expect(wrapper5.element.getAttribute('role')).toBe('listitem')
   })
+
+  it('should not have an internal state unless its a router-link', async () => {
+    const wrapper = mountFunction({})
+
+    expect(wrapper.vm.isActive).toBeFalsy()
+    wrapper.vm.toggle()
+    expect(wrapper.vm.isActive).toBeFalsy()
+    wrapper.vm.toggle()
+    expect(wrapper.vm.isActive).toBeFalsy()
+
+    const wrapper2 = mountFunction({ propsData: { to: { name: 'test' } }, stubs: ['router-link'] })
+
+    expect(wrapper2.vm.isActive).toBeFalsy()
+    wrapper2.vm.toggle()
+    expect(wrapper2.vm.isActive).toBeTruthy()
+  })
 })

package/src/components/VMenu/VMenu.ts

@@ -75,10 +75,6 @@ export default baseMixins.extend({
     },
     offsetX: Boolean,
     offsetY: Boolean,
-    openOnClick: {
-      type: Boolean,
-      default: true,
-    },
     openOnHover: Boolean,
     origin: {
       type: String,
@@ -391,7 +387,7 @@ export default baseMixins.extend({
     getTiles () {
       if (!this.$refs.content) return
 
-      this.tiles = Array.from(this.$refs.content.querySelectorAll('.v-list-item'))
+      this.tiles = Array.from(this.$refs.content.querySelectorAll('.v-list-item, .v-divider, .v-subheader'))
     },
     mouseEnterHandler () {
       this.runDelay('open', () => {
@@ -403,7 +399,7 @@ export default baseMixins.extend({
     mouseLeaveHandler (e: MouseEvent) {
       // Prevent accidental re-activation
       this.runDelay('close', () => {
-        if (this.$refs.content.contains(e.relatedTarget as HTMLElement)) return
+        if (this.$refs.content?.contains(e.relatedTarget as HTMLElement)) return
 
         requestAnimationFrame(() => {
           this.isActive = false

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -351,6 +351,8 @@ export default baseMixins.extend({
     },
     genListeners () {
       const on: Record<string, (e: Event) => void> = {
+        mouseenter: () => (this.isMouseover = true),
+        mouseleave: () => (this.isMouseover = false),
         transitionend: (e: Event) => {
           if (e.target !== e.currentTarget) return
           this.$emit('transitionend', e)
@@ -366,11 +368,6 @@ export default baseMixins.extend({
         on.click = () => this.$emit('update:mini-variant', false)
       }
 
-      if (this.expandOnHover) {
-        on.mouseenter = () => (this.isMouseover = true)
-        on.mouseleave = () => (this.isMouseover = false)
-      }
-
       return on
     },
     genPosition (name: 'prepend' | 'append') {
@@ -442,12 +439,12 @@ export default baseMixins.extend({
         !this.$el
       ) return 0
 
-      const width = Number(this.computedWidth)
+      const width = Number(this.miniVariant ? this.miniVariantWidth : this.width)
 
       return isNaN(width) ? this.$el.clientWidth : width
     },
     updateMiniVariant (val: boolean) {
-      if (this.miniVariant !== val) this.$emit('update:mini-variant', val)
+      if (this.expandOnHover && this.miniVariant !== val) this.$emit('update:mini-variant', val)
     },
   },
 

package/src/components/VNavigationDrawer/__tests__/VNavigationDrawer.spec.ts

@@ -391,7 +391,7 @@ describe('VNavigationDrawer', () => { // eslint-disable-line max-statements
     wrapper.setProps({ expandOnHover: false })
     await wrapper.vm.$nextTick()
 
-    expect(calls).toEqual([true, false])
+    expect(calls).toEqual([true])
   })
 
   it('should react to open / close from touch events', async () => {