fix(VDataTable): allow filters on all columns (#21876)

Author: J-Sek

packages/vuetify/src/composables/__tests__/filter.spec.ts

@@ -64,30 +64,10 @@ describe('filter', () => {
         value: (s: string) => s === '1',
       }
       const items = [
-        {
-          title: 'foo',
-          subtitle: 'bar',
-          value: '1',
-          custom: '1',
-        },
-        {
-          title: 'fizz',
-          subtitle: 'buzz',
-          value: '1',
-          custom: 'bar',
-        },
-        {
-          title: 'foobar',
-          subtitle: 'fizzbuzz',
-          value: '2',
-          custom: 'bar',
-        },
-        {
-          title: 'buzz',
-          subtitle: 'buzz',
-          value: '1',
-          custom: 'buzz',
-        },
+        { title: 'foo', subtitle: 'bar', value: '1', custom: '1' },
+        { title: 'fizz', subtitle: 'buzz', value: '1', custom: 'bar' },
+        { title: 'foobar', subtitle: 'fizzbuzz', value: '2', custom: 'bar' },
+        { title: 'buzz', subtitle: 'buzz', value: '1', custom: 'buzz' },
       ] as any
       const filterKeys = ['title', 'value', 'subtitle', 'custom']
 
@@ -122,26 +102,10 @@ describe('filter', () => {
         value: (s: string) => s === '1',
       }
       const items = [
-        {
-          title: 'foo',
-          subtitle: 'bar',
-          value: '1',
-        },
-        {
-          title: 'fizz',
-          subtitle: 'buzz',
-          value: '1',
-        },
-        {
-          title: 'foobar',
-          subtitle: 'fizzbuzz',
-          value: '2',
-        },
-        {
-          title: 'buzz',
-          subtitle: 'buzz',
-          value: '2',
-        },
+        { title: 'foo', subtitle: 'bar', value: '1' },
+        { title: 'fizz', subtitle: 'buzz', value: '1' },
+        { title: 'foobar', subtitle: 'fizzbuzz', value: '2' },
+        { title: 'buzz', subtitle: 'buzz', value: '2' },
       ] as any
       const filterKeys = ['title', 'value']
 
@@ -161,14 +125,33 @@ describe('filter', () => {
         filterKeys,
         customKeyFilter,
         filterMode: 'intersection',
-      })).toHaveLength(0)
+      })).toHaveLength(2)
 
       expect(filterItems(items, '', {
         filterKeys,
         customKeyFilter,
         filterMode: 'every',
       })).toHaveLength(2)
     })
+
+    // https://github.com/vuetifyjs/vuetify/pull/21876
+    it('should return filtered rows when all columns have filters', () => {
+      const customKeyFilter = {
+        title: (s: string) => s.length < 5,
+        subtitle: (s: string) => s.startsWith('b'),
+        value: (s: any) => Number(s) > 0,
+      }
+      const items = [
+        { title: 'foo', subtitle: 'bar', value: 1 },
+        { title: 'fizz', subtitle: 'buzz', value: 1 },
+        { title: 'foobar', subtitle: 'fizzbuzz', value: 2 },
+      ] as any
+
+      expect(filterItems(items, '', {
+        customKeyFilter,
+        filterMode: 'intersection',
+      })).toHaveLength(2)
+    })
   })
 
   describe('useFilter', () => {

packages/vuetify/src/composables/filter.tsx

@@ -102,12 +102,15 @@ export function filterItems (
     let match: FilterMatch = -1
 
     if ((query || customFiltersLength > 0) && !options?.noFilter) {
+      let hasOnlyCustomFilters = false
+
       if (typeof item === 'object') {
         if (item.type === 'divider' || item.type === 'subheader') {
           continue
         }
 
         const filterKeys = keys || Object.keys(transformed)
+        hasOnlyCustomFilters = filterKeys.length === customFiltersLength
 
         for (const key of filterKeys) {
           const value = getPropertyFromItem(transformed, key)
@@ -146,7 +149,7 @@ export function filterItems (
         options?.filterMode === 'intersection' &&
         (
           customMatchesLength !== customFiltersLength ||
-          !defaultMatchesLength
+          (!defaultMatchesLength && customFiltersLength > 0 && !hasOnlyCustomFilters)
         )
       ) continue
     }