fix(VDataTable): default to first itemsPerPage option (#8578)

default to first itemsPerPage option if itemsPerPage is not found in list of options closes #8184
vuetifyjs · Aug 22, 2019 · cb045a2 · cb045a2
1 parent 2277942
commit cb045a2
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 4 deletions.
diff --git a/packages/vuetify/src/components/VData/VData.ts b/packages/vuetify/src/components/VData/VData.ts
@@ -217,8 +217,11 @@ export default Vue.extend({
     itemsPerPage (itemsPerPage: number) {
       this.updateOptions({ itemsPerPage })
     },
-    'internalOptions.itemsPerPage' (itemsPerPage: number) {
-      this.$emit('update:items-per-page', itemsPerPage)
+    'internalOptions.itemsPerPage': {
+      handler (itemsPerPage: number) {
+        this.$emit('update:items-per-page', itemsPerPage)
+      },
+      immediate: true,
     },
     sortBy (sortBy: string | string[]) {
       this.updateOptions({ sortBy: wrapInArray(sortBy) })

diff --git a/packages/vuetify/src/components/VDataIterator/VDataIterator.ts b/packages/vuetify/src/components/VDataIterator/VDataIterator.ts
@@ -63,7 +63,7 @@ export default Themeable.extend({
     someItems (): boolean {
       return this.internalCurrentItems.some((i: any) => this.isSelected(i))
     },
-    sanitizedFooterProps (): object {
+    sanitizedFooterProps (): Record<string, any> {
       return camelizeObjectKeys(this.footerProps)
     },
   },

diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.ts b/packages/vuetify/src/components/VDataTable/VDataTable.ts
@@ -144,9 +144,18 @@ export default VDataIterator.extend({
     headersWithoutCustomFilters (): TableHeader[] {
       return this.computedHeaders.filter(header => !header.filter)
     },
-    sanitizedHeaderProps (): object {
+    sanitizedHeaderProps (): Record<string, any> {
       return camelizeObjectKeys(this.headerProps)
     },
+    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]
+        return typeof firstOption === 'object' ? firstOption.value : firstOption
+      }
+
+      return itemsPerPage
+    },
   },
 
   created () {
@@ -533,6 +542,7 @@ export default VDataIterator.extend({
         ...this.$props,
         customFilter: this.customFilterWithColumns,
         customSort: this.customSortWithHeaders,
+        itemsPerPage: this.computedItemsPerPage,
       },
       on: {
         'update:options': (v: DataOptions, old: DataOptions) => {

diff --git a/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts b/packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts
@@ -398,4 +398,28 @@ 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()
+    const options = jest.fn()
+    const wrapper = mountFunction({
+      propsData: {
+        headers: testHeaders,
+        items: testItems,
+        footerProps: {
+          itemsPerPageOptions: [5, 6],
+        },
+      },
+      listeners: {
+        'update:items-per-page': itemsPerPage,
+        'update:options': options,
+      },
+    })
+
+    expect(itemsPerPage).toHaveBeenCalledWith(5)
+    expect(options).toHaveBeenCalledWith(expect.objectContaining({
+      itemsPerPage: 5,
+    }))
+  })
 })