vuetify 2.5.9 → 2.5.13

package/src/components/VCombobox/VCombobox.ts

@@ -108,11 +108,6 @@ export default VAutocomplete.extend({
 
       this.$nextTick(this.updateSelf)
     },
-    onFilteredItemsChanged (val: never[], oldVal: never[]) {
-      if (!this.autoSelectFirst) return
-
-      VAutocomplete.options.methods.onFilteredItemsChanged.call(this, val, oldVal)
-    },
     onKeyDown (e: KeyboardEvent) {
       const keyCode = e.keyCode
 

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

@@ -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/VDataTable/VDataTableHeaderMobile.ts

@@ -90,7 +90,9 @@ export default mixins(header).extend({
       children.push(this.genSortSelect(sortHeaders))
     }
 
-    const th = h('th', [h('div', { staticClass: 'v-data-table-header-mobile__wrapper' }, children)])
+    const th = children.length
+      ? h('th', [h('div', { staticClass: 'v-data-table-header-mobile__wrapper' }, children)])
+      : undefined
 
     const tr = h('tr', [th])
 

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

@@ -6452,10 +6452,6 @@ exports[`VDataTable.ts should pass kebab-case footer props correctly 1`] = `
       </colgroup>
       <thead class="v-data-table-header v-data-table-header-mobile">
         <tr>
-          <th>
-            <div class="v-data-table-header-mobile__wrapper">
-            </div>
-          </th>
         </tr>
       </thead>
       <tbody>
@@ -6555,10 +6551,6 @@ exports[`VDataTable.ts should render 1`] = `
       </colgroup>
       <thead class="v-data-table-header v-data-table-header-mobile">
         <tr>
-          <th>
-            <div class="v-data-table-header-mobile__wrapper">
-            </div>
-          </th>
         </tr>
       </thead>
       <tbody>
@@ -6658,10 +6650,6 @@ exports[`VDataTable.ts should render footer.page-text slot content 1`] = `
       </colgroup>
       <thead class="v-data-table-header v-data-table-header-mobile">
         <tr>
-          <th>
-            <div class="v-data-table-header-mobile__wrapper">
-            </div>
-          </th>
         </tr>
       </thead>
       <tbody>
@@ -6760,10 +6748,6 @@ exports[`VDataTable.ts should render footer.prepend slot content 1`] = `
       </colgroup>
       <thead class="v-data-table-header v-data-table-header-mobile">
         <tr>
-          <th>
-            <div class="v-data-table-header-mobile__wrapper">
-            </div>
-          </th>
         </tr>
       </thead>
       <tbody>
@@ -7065,10 +7049,6 @@ exports[`VDataTable.ts should render loading state 1`] = `
       </colgroup>
       <thead class="v-data-table-header v-data-table-header-mobile">
         <tr>
-          <th>
-            <div class="v-data-table-header-mobile__wrapper">
-            </div>
-          </th>
         </tr>
       </thead>
       <thead>

package/src/components/VDialog/VDialog.ts

@@ -187,8 +187,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()
         })
       })

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/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/VOverlay/VOverlay.ts

@@ -86,6 +86,7 @@ export default mixins(
 
     return h('div', {
       staticClass: 'v-overlay',
+      on: this.$listeners,
       class: this.classes,
       style: this.styles,
     }, children)

package/src/components/VRadioGroup/VRadioGroup.ts

@@ -89,4 +89,12 @@ export default baseMixins.extend({
     },
     onClick: BaseItemGroup.options.methods.onClick,
   },
+
+  render (h) {
+    const vnode = VInput.options.render.call(this, h)
+
+    this._b(vnode.data!, 'div', this.attrs$)
+
+    return vnode
+  },
 })

package/src/components/VRangeSlider/VRangeSlider.ts

@@ -229,7 +229,9 @@ export default VSlider.extend({
         this.thumbPressed = true
       }
 
-      this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value)
+      if (this.activeThumb === null) {
+        this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value)
+      }
 
       this.setInternalValue(value)
     },

package/src/components/VSelect/VSelect.ts

@@ -664,7 +664,7 @@ export default baseMixins.extend<options>().extend({
 
       // If menu is active, allow default
       // listIndex change from menu
-      if (this.isMenuActive && keyCode !== keyCodes.tab) {
+      if (this.isMenuActive && [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end, keyCodes.enter].includes(keyCode)) {
         this.$nextTick(() => {
           menu.changeListIndex(e)
           this.$emit('update:list-index', menu.listIndex)

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -20,6 +20,7 @@ import mixins, { ExtractVue } from '../../util/mixins'
 
 // Types
 import Vue, { VNode } from 'vue'
+import { composedPath } from '../../util/helpers'
 
 interface TouchEvent {
   touchstartX: number
@@ -41,6 +42,50 @@ interface options extends Vue {
   }
 }
 
+export function calculateUpdatedOffset (
+  selectedElement: HTMLElement,
+  widths: Widths,
+  rtl: boolean,
+  currentScrollOffset: number
+): number {
+  const clientWidth = selectedElement.clientWidth
+  const offsetLeft = rtl
+    ? (widths.content - selectedElement.offsetLeft - clientWidth)
+    : selectedElement.offsetLeft
+
+  if (rtl) {
+    currentScrollOffset = -currentScrollOffset
+  }
+
+  const totalWidth = widths.wrapper + currentScrollOffset
+  const itemOffset = clientWidth + offsetLeft
+  const additionalOffset = clientWidth * 0.4
+
+  if (offsetLeft <= currentScrollOffset) {
+    currentScrollOffset = Math.max(offsetLeft - additionalOffset, 0)
+  } else if (totalWidth <= itemOffset) {
+    currentScrollOffset = Math.min(currentScrollOffset - (totalWidth - itemOffset - additionalOffset), widths.content - widths.wrapper)
+  }
+
+  return rtl ? -currentScrollOffset : currentScrollOffset
+}
+
+export function calculateCenteredOffset (
+  selectedElement: HTMLElement,
+  widths: Widths,
+  rtl: boolean
+): number {
+  const { offsetLeft, clientWidth } = selectedElement
+
+  if (rtl) {
+    const offsetCentered = widths.content - offsetLeft - clientWidth / 2 - widths.wrapper / 2
+    return -Math.min(widths.content - widths.wrapper, Math.max(0, offsetCentered))
+  } else {
+    const offsetCentered = offsetLeft + clientWidth / 2 - widths.wrapper / 2
+    return Math.min(widths.content - widths.wrapper, Math.max(0, offsetCentered))
+  }
+}
+
 export const BaseSlideGroup = mixins<options &
 /* eslint-disable indent */
   ExtractVue<[
@@ -179,6 +224,28 @@ export const BaseSlideGroup = mixins<options &
   },
 
   methods: {
+    onScroll () {
+      this.$refs.wrapper.scrollLeft = 0
+    },
+    onFocusin (e: FocusEvent) {
+      if (!this.isOverflowing) return
+
+      // Focused element is likely to be the root of an item, so a
+      // breadth-first search will probably find it in the first iteration
+      for (const el of composedPath(e)) {
+        for (const vm of this.items) {
+          if (vm.$el === el) {
+            this.scrollOffset = calculateUpdatedOffset(
+              vm.$el as HTMLElement,
+              this.widths,
+              this.$vuetify.rtl,
+              this.scrollOffset
+            )
+            return
+          }
+        }
+      }
+    },
     // Always generate next for scrollable hint
     genNext (): VNode | null {
       const slot = this.$scopedSlots.next
@@ -200,6 +267,9 @@ export const BaseSlideGroup = mixins<options &
       return this.$createElement('div', {
         staticClass: 'v-slide-group__content',
         ref: 'content',
+        on: {
+          focusin: this.onFocusin,
+        },
       }, this.$slots.default)
     },
     genData (): object {
@@ -266,6 +336,9 @@ export const BaseSlideGroup = mixins<options &
           },
         }],
         ref: 'wrapper',
+        on: {
+          scroll: this.onScroll,
+        },
       }, [this.genContent()])
     },
     calculateNewOffset (direction: 'prev' | 'next', widths: Widths, rtl: boolean, currentScrollOffset: number) {
@@ -368,13 +441,13 @@ export const BaseSlideGroup = mixins<options &
       ) {
         this.scrollOffset = 0
       } else if (this.centerActive) {
-        this.scrollOffset = this.calculateCenteredOffset(
+        this.scrollOffset = calculateCenteredOffset(
           this.selectedItem.$el as HTMLElement,
           this.widths,
           this.$vuetify.rtl
         )
       } else if (this.isOverflowing) {
-        this.scrollOffset = this.calculateUpdatedOffset(
+        this.scrollOffset = calculateUpdatedOffset(
           this.selectedItem.$el as HTMLElement,
           this.widths,
           this.$vuetify.rtl,
@@ -382,39 +455,6 @@ export const BaseSlideGroup = mixins<options &
         )
       }
     },
-    calculateUpdatedOffset (selectedElement: HTMLElement, widths: Widths, rtl: boolean, currentScrollOffset: number): number {
-      const clientWidth = selectedElement.clientWidth
-      const offsetLeft = rtl
-        ? (widths.content - selectedElement.offsetLeft - clientWidth)
-        : selectedElement.offsetLeft
-
-      if (rtl) {
-        currentScrollOffset = -currentScrollOffset
-      }
-
-      const totalWidth = widths.wrapper + currentScrollOffset
-      const itemOffset = clientWidth + offsetLeft
-      const additionalOffset = clientWidth * 0.4
-
-      if (offsetLeft <= currentScrollOffset) {
-        currentScrollOffset = Math.max(offsetLeft - additionalOffset, 0)
-      } else if (totalWidth <= itemOffset) {
-        currentScrollOffset = Math.min(currentScrollOffset - (totalWidth - itemOffset - additionalOffset), widths.content - widths.wrapper)
-      }
-
-      return rtl ? -currentScrollOffset : currentScrollOffset
-    },
-    calculateCenteredOffset (selectedElement: HTMLElement, widths: Widths, rtl: boolean): number {
-      const { offsetLeft, clientWidth } = selectedElement
-
-      if (rtl) {
-        const offsetCentered = widths.content - offsetLeft - clientWidth / 2 - widths.wrapper / 2
-        return -Math.min(widths.content - widths.wrapper, Math.max(0, offsetCentered))
-      } else {
-        const offsetCentered = offsetLeft + clientWidth / 2 - widths.wrapper / 2
-        return Math.min(widths.content - widths.wrapper, Math.max(0, offsetCentered))
-      }
-    },
     scrollTo /* istanbul ignore next */ (location: 'prev' | 'next') {
       this.scrollOffset = this.calculateNewOffset(location, {
         // Force reflow

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

@@ -1,5 +1,5 @@
 // Components
-import VSlideGroup from '../VSlideGroup'
+import VSlideGroup, { calculateCenteredOffset, calculateUpdatedOffset } from '../VSlideGroup'
 
 // Services
 import { Breakpoint } from '../../../services/breakpoint'
@@ -95,7 +95,6 @@ describe('VSlideGroup.ts', () => {
   })
 
   it('should compute updatedOffset for active element', async () => {
-    const { calculateUpdatedOffset } = mountFunction().vm
     const testOffset = (offsetLeft: number, rtl: boolean, expectedOffset: number) => {
       const offset = calculateUpdatedOffset({
         offsetLeft,
@@ -120,7 +119,6 @@ describe('VSlideGroup.ts', () => {
   })
 
   it('should compute centeredOffset for active element', async () => {
-    const { calculateCenteredOffset } = mountFunction().vm
     const testOffset = (offsetLeft: number, rtl: boolean, expectedOffset: number) => {
       const offset = calculateCenteredOffset({
         offsetLeft,

package/src/components/VSnackbar/VSnackbar.sass

@@ -40,6 +40,7 @@
     transition-duration: .15s
     transition-property: opacity, transform
     transition-timing-function: map-get($transition, 'linear-out-slow-in')
+    z-index: 1
 
     &.theme--dark
       background-color: $snackbar-background-color
@@ -117,6 +118,7 @@
     position: absolute
     right: 0
     top: 0
+    z-index: -1
 
   &--top
     align-items: flex-start

package/src/components/VStepper/VStepper.sass

@@ -182,7 +182,11 @@
     padding-bottom: $stepper-vertical-padding-bottom
 
     .v-stepper__content
-      padding: $stepper-vertical-content-padding
+      +ltr()
+        padding: $stepper-vertical-content-ltr-padding
+      +rtl()
+        padding: $stepper-vertical-content-rtl-padding
+  
       width: auto
       +ltr()
         margin: $stepper-vertical-content-ltr-margin

package/src/components/VStepper/_variables.scss

@@ -24,7 +24,8 @@ $stepper-step-step-min-width: 24px !default;
 $stepper-step-step-width: 24px !default;
 $stepper-vertical-content-ltr-margin: -8px -36px -16px 36px !default;
 $stepper-vertical-content-rtl-margin: -8px 36px -16px -36px !default;
-$stepper-vertical-content-padding: 16px 60px 16px 23px !default;
+$stepper-vertical-content-ltr-padding: 16px 60px 16px 23px !default;
+$stepper-vertical-content-rtl-padding: 16px 23px 16px 60px !default;
 $stepper-vertical-padding-bottom: 36px !default;
 $stepper-vertical-step-padding: 24px 24px 16px !default;
 $stepper-vertical-step-step-margin: 12px !default;

package/src/components/VTabs/VTab.ts

@@ -67,12 +67,16 @@ export default baseMixins.extend<options>().extend(
     },
   },
 
-  mounted () {
-    this.onRouteChange()
-  },
-
   methods: {
     click (e: KeyboardEvent | MouseEvent): void {
+      // Prevent keyboard actions
+      // from children elements
+      // within disabled tabs
+      if (this.disabled) {
+        e.preventDefault()
+        return
+      }
+
       // If user provides an
       // actual link, do not
       // prevent default
@@ -86,6 +90,12 @@ export default baseMixins.extend<options>().extend(
 
       this.to || this.toggle()
     },
+    toggle () {
+      // VItemGroup treats a change event as a click
+      if (!this.isActive) {
+        this.$emit('change')
+      }
+    },
   },
 
   render (h): VNode {

package/src/components/VTabs/VTabs.sass

@@ -36,7 +36,7 @@
 
   .v-menu__activator
     height: 100%
-  
+
   &.v.tabs--vertical.v-tabs--right
     flex-direction: row-reverse
 
@@ -221,5 +221,8 @@
     color: inherit
 
 .v-tab--disabled
-  pointer-events: none
   opacity: $tab-disabled-opacity
+
+  &,
+  & *
+    pointer-events: none

package/src/components/VTabs/VTabsBar.ts

@@ -76,8 +76,8 @@ export default mixins(
       let hasOld = false
 
       for (const item of items) {
-        if (item.to === newPath) hasNew = true
-        else if (item.to === oldPath) hasOld = true
+        if (item.to === oldPath) hasOld = true
+        else if (item.to === newPath) hasNew = true
 
         if (hasNew && hasOld) break
       }

package/src/components/VTextarea/VTextarea.ts

@@ -56,6 +56,13 @@ export default baseMixins.extend({
   },
 
   watch: {
+    autoGrow (val: boolean) {
+      this.$nextTick(() => {
+        val
+          ? this.calculateInputHeight()
+          : this.$refs.input?.style.removeProperty('height')
+      })
+    },
     lazyValue () {
       this.autoGrow && this.$nextTick(this.calculateInputHeight)
     },