fix(VDataTable): selection bug when using numbers as item-key (#14008)

closes #14006
vuetifyjs · Jul 30, 2021 · 248add9 · 248add9
1 parent 688f223
commit 248add9
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.ts b/packages/vuetify/src/components/VDataIterator/VDataIterator.ts
@@ -201,10 +201,10 @@ export default mixins(
 
       const index = this.selectableItems.findIndex(x => getObjectValueByPath(x, this.itemKey) === key)
       if (this.lastEntry === -1) this.lastEntry = index
-      else {
+      else if (this.shiftKeyDown && !this.singleSelect && emit) {
         const lastEntryKey = getObjectValueByPath(this.selectableItems[this.lastEntry], this.itemKey)
-        const lastEntryKeySelected = Object.keys(this.selection).includes(lastEntryKey.toString())
-        if (this.shiftKeyDown && !this.singleSelect && emit) this.multipleSelect(lastEntryKeySelected, emit, selection, index)
+        const lastEntryKeySelected = Object.keys(this.selection).includes(String(lastEntryKey))
+        this.multipleSelect(lastEntryKeySelected, emit, selection, index)
       }
       this.lastEntry = index
 

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts
@@ -1070,4 +1070,38 @@ describe('VDataTable.ts', () => {
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.internalCurrentItems).toHaveLength(1)
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/14006
+  it('should allow selection on second page when using numbers as item key', async () => {
+    const input = jest.fn()
+    const items = testItems.map((item, index) => ({ ...item, name: index + 1 })).slice(0, 8)
+    const wrapper = mountFunction({
+      propsData: {
+        items,
+        itemKey: 'name',
+        itemsPerPage: 5,
+        showSelect: true,
+        headers: testHeaders,
+        mobileBreakpoint: 0,
+      },
+      listeners: {
+        input,
+      },
+    })
+
+    let checkbox = wrapper.findAll('td > .v-data-table__checkbox').at(4)
+
+    checkbox.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    wrapper.setProps({ page: 2 })
+    await wrapper.vm.$nextTick()
+
+    checkbox = wrapper.findAll('td > .v-data-table__checkbox').at(0)
+
+    checkbox.trigger('click')
+    await wrapper.vm.$nextTick()
+
+    expect(input).toHaveBeenCalledWith([items[4], items[5]])
+  })
 })