fix(VDataTable): handle items-per-page-options with objects (#8819)

* fix(VDataTable): handle items-per-page-options with objects closes #8817 * fix: cleaner code
vuetifyjs · Sep 24, 2019 · 81703af · 81703af
1 parent 8ba982d
commit 81703af
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.ts b/packages/vuetify/src/components/VDataTable/VDataTable.ts
@@ -149,8 +149,14 @@ export default VDataIterator.extend({
     },
     computedItemsPerPage (): number {
       const itemsPerPage = this.options && this.options.itemsPerPage ? this.options.itemsPerPage : this.itemsPerPage
-      if (this.sanitizedFooterProps.itemsPerPageOptions && !this.sanitizedFooterProps.itemsPerPageOptions.includes(itemsPerPage)) {
-        const firstOption = this.sanitizedFooterProps.itemsPerPageOptions[0]
+      const { itemsPerPageOptions } = this.sanitizedFooterProps
+      if (
+        itemsPerPageOptions &&
+        !itemsPerPageOptions.find((item: number | { value: number }) => {
+          return typeof item === 'number' ? item === itemsPerPage : item.value === itemsPerPage
+        })
+      ) {
+        const firstOption = itemsPerPageOptions[0]
         return typeof firstOption === 'object' ? firstOption.value : firstOption
       }
 

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts
@@ -435,6 +435,7 @@ describe('VDataTable.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
   // https://github.com/vuetifyjs/vuetify/issues/8184
   it('should default to first option in itemsPerPageOptions if it does not include itemsPerPage', async () => {
     const itemsPerPage = jest.fn()
@@ -458,4 +459,24 @@ describe('VDataTable.ts', () => {
       itemsPerPage: 5,
     }))
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/8817
+  it('should handle object when checking if it should default to first option in itemsPerPageOptions', async () => {
+    const itemsPerPage = jest.fn()
+    const wrapper = mountFunction({
+      propsData: {
+        headers: testHeaders,
+        items: testItems,
+        itemsPerPage: -1,
+        footerProps: {
+          itemsPerPageOptions: [5, 6, { text: 'All', value: -1 }],
+        },
+      },
+      listeners: {
+        'update:items-per-page': itemsPerPage,
+      },
+    })
+
+    expect(itemsPerPage).toHaveBeenCalledWith(-1)
+  })
 })