fix(VData): allow group-by to be used with disable-sort (#13027)

Co-authored-by: Sören Lerch <soeren.lerch@baecker-mueller.de> Co-authored-by: John Leider <john.j.leider@gmail.com>
vuetifyjs · May 24, 2021 · 560b52c · 560b52c
1 parent 2508e2f
commit 560b52c
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/packages/vuetify/src/components/VData/VData.ts b/packages/vuetify/src/components/VData/VData.ts
@@ -158,7 +158,7 @@ export default Vue.extend({
     computedItems (): any[] {
       let items = this.filteredItems.slice()
 
-      if (!this.disableSort && this.serverItemsLength <= 0) {
+      if ((!this.disableSort || this.internalOptions.groupBy.length) && this.serverItemsLength <= 0) {
         items = this.sortItems(items)
       }
 
@@ -348,8 +348,13 @@ export default Vue.extend({
       }
     },
     sortItems (items: any[]): any[] {
-      let sortBy = this.internalOptions.sortBy
-      let sortDesc = this.internalOptions.sortDesc
+      let sortBy: string[] = []
+      let sortDesc: boolean[] = []
+
+      if (!this.disableSort) {
+        sortBy = this.internalOptions.sortBy
+        sortDesc = this.internalOptions.sortDesc
+      }
 
       if (this.internalOptions.groupBy.length) {
         sortBy = [...this.internalOptions.groupBy, ...sortBy]

diff --git a/packages/vuetify/src/components/VData/__tests__/VData.spec.ts b/packages/vuetify/src/components/VData/__tests__/VData.spec.ts
@@ -562,4 +562,38 @@ describe('VData.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/11905
+  it('should group items when sort is disabled', async () => {
+    const render = jest.fn()
+    const items = [
+      { id: 1, text: 'foo', baz: 'one' },
+      { id: 2, text: 'bar', baz: 'two' },
+      { id: 3, text: 'baz', baz: 'one' },
+    ]
+
+    const wrapper = mountFunction({
+      propsData: {
+        items,
+        groupBy: ['baz'],
+        disableSort: true,
+      },
+      scopedSlots: {
+        default: render,
+      },
+    })
+
+    expect(render).toHaveBeenCalledWith(expect.objectContaining({
+      groupedItems: [
+        {
+          name: 'one',
+          items: [items[0], items[2]],
+        },
+        {
+          name: 'two',
+          items: [items[1]],
+        },
+      ],
+    }))
+  })
 })