fix(VTabs): proxy modelValue to VSlideGroup

fixes regression from 7bbbe04
vuetifyjs · Jul 7, 2022 · 0f30a42 · 0f30a42
1 parent b492a3c
commit 0f30a42
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/packages/vuetify/src/components/VTabs/VTabs.tsx b/packages/vuetify/src/components/VTabs/VTabs.tsx
@@ -10,6 +10,7 @@ import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeTagProps } from '@/composables/tag'
 import { provideDefaults } from '@/composables/defaults'
 import { useBackgroundColor } from '@/composables/color'
+import { useProxiedModel } from '@/composables/proxiedModel'
 
 // Utilities
 import { computed, toRef } from 'vue'
@@ -68,7 +69,8 @@ export const VTabs = defineComponent({
     'update:modelValue': (v: unknown) => true,
   },
 
-  setup (props, { slots, emit }) {
+  setup (props, { slots }) {
+    const model = useProxiedModel(props, 'modelValue')
     const parsedItems = computed(() => parseItems(props.items))
     const { densityClasses } = useDensity(props)
     const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'backgroundColor'))
@@ -86,6 +88,7 @@ export const VTabs = defineComponent({
 
     useRender(() => (
       <VSlideGroup
+        v-model={ model.value }
         class={[
           'v-tabs',
           `v-tabs--${props.direction}`,
@@ -105,8 +108,6 @@ export const VTabs = defineComponent({
         symbol={ VTabsSymbol }
         mandatory="force"
         direction={ props.direction }
-        modelValue={ props.modelValue }
-        onUpdate:modelValue={ v => emit('update:modelValue', v) }
       >
         { slots.default ? slots.default() : parsedItems.value.map(item => (
           <VTab { ...item } key={ item.title } />

diff --git a/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx b/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx
@@ -55,12 +55,16 @@ describe('VTabs', () => {
   })
 
   it('should respond to v-model changes', () => {
-    cy.mount(({ modelValue }: any) => (
+    cy.mount(({ modelValue }: { modelValue: string }) => (
       <VTabs modelValue={ modelValue }>
         <VTab value="foo">foo</VTab>
         <VTab value="bar">bar</VTab>
       </VTabs>
-    ))
+    ), {
+      props: {
+        modelValue: 'foo',
+      },
+    })
 
     cy.get('.v-tab').eq(0).should('have.class', 'v-tab--selected')
 

diff --git a/packages/vuetify/types/cypress.d.ts b/packages/vuetify/types/cypress.d.ts
@@ -9,7 +9,7 @@ type Swipe = number[] | string
 declare global {
   namespace Cypress {
     export interface Chainable {
-      mount: typeof cyMount & ((component: JSX.Element, options?: MountingOptions<any>) => Cypress.Chainable)
+      mount: typeof cyMount
       setProps (props: Record<string, unknown>): Cypress.Chainable
       getBySel (dataTestAttribute: string, args?: any): Chainable<Element>
       percySnapshot (