fix(VItemGroup): select first non-disabled item with **mandatory** prop

vuetifyjs · Mar 4, 2019 · 6d1615f · 6d1615f
1 parent 054edba
commit 6d1615f
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 3 deletions.
diff --git a/packages/vuetify/src/components/VItemGroup/VItemGroup.ts b/packages/vuetify/src/components/VItemGroup/VItemGroup.ts
@@ -172,10 +172,20 @@ export const BaseItemGroup = mixins(
     updateMandatory (last?: boolean) {
       if (!this.items.length) return
 
-      const index = last ? this.items.length - 1 : 0
+      const items = this.items.slice()
+
+      if (last) items.reverse()
+
+      const item = items.find(item => !item.disabled)
+
+      // If no tabs are available
+      // aborts mandatory value
+      if (!item) return
+
+      const index = this.items.indexOf(item)
 
       this.updateInternalValue(
-        this.getValue(this.items[index], index)
+        this.getValue(item, index)
       )
     },
     updateMultiple (value: any) {

diff --git a/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.ts b/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.ts
@@ -11,6 +11,7 @@ import {
   mount,
   Wrapper
 } from '@vue/test-utils'
+import { ExtractVue } from './../../../util/mixins'
 import toHaveBeenWarnedInit from '../../../../test/util/to-have-been-warned'
 
 const vm = new Vue()
@@ -27,7 +28,8 @@ const Mock = {
 }
 
 describe('VItemGroup', () => {
-  let mountFunction: (options?: object) => Wrapper<Vue>
+  type Instance = ExtractVue<typeof VItemGroup>
+  let mountFunction: (options?: object) => Wrapper<Instance>
   let localVue: typeof Vue
 
   beforeEach(() => {
@@ -299,4 +301,37 @@ describe('VItemGroup', () => {
 
     expect(change).not.toHaveBeenCalled()
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/5000
+  it('should update mandatory to first non-disabled item', () => {
+    const Mock2 = {
+      name: 'mock2',
+
+      render (h) {
+        return h(VItem, {
+          props: {
+            disabled: true
+          },
+          scopedSlots: {
+            default: defaultSlot
+          }
+        })
+      }
+    }
+
+    const wrapper = mountFunction({
+      propsData: {
+        mandatory: true
+      },
+      slots: {
+        default: [
+          Mock2,
+          Mock,
+          Mock
+        ]
+      }
+    })
+
+    expect(wrapper.vm.internalValue).toBe(1)
+  })
 })
diff --git a/packages/vuetify/src/mixins/groupable.ts b/packages/vuetify/src/mixins/groupable.ts
@@ -10,6 +10,7 @@ import { VueConstructor } from 'vue'
 export type Groupable<T extends string> = VueConstructor<ExtractVue<Registrable<T>> & {
   activeClass: string
   isActive: boolean
+  disabled: boolean
   groupClasses: object
   toggle (): void
 }>