Vuetify: [Bug Report] VDatatable: Custom filtering not working

[leo-rw]

Environment

Vuetify Version: 2.2.28
Last working version: 2.2.26
Vue Version: 2.6.11
Browsers: Firefox 75.0, Google Chrome
OS: Mac OS 10.14

Steps to reproduce

1. Navigate to Custom filter example in Vuetify website:
   https://vuetifyjs.com/en/components/data-tables/#custom-filtering

2. Entering data in search box is not triggering filtering functionality.

Expected Behavior

Entering data in search box should filter datatable results.

Actual Behavior

Nothing happens.

Reproduction Link

https://codepen.io/rw-leo/pen/OJyweQp?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fdata-tables%2F

Other comments

search functionality seems to be working in datatables, as long as not being used along with custom-filter.

[adamarla]

I can confirm that this is the case. Any update?

[leo-rw]

This is still an unresolved issue as of version 2.2.29.

This bug affects the normal search functionality if there is at least one table header object that defines a filter() function.

Looks like this behavior was introduced on this Pull Request:
https://github.com/vuetifyjs/vuetify/pull/11181

... which was meant to solve this issue:
https://github.com/vuetifyjs/vuetify/issues/9887

Any idea about how long is gonna take to fix this?

[hackerESQ]

Also stumbled across this. Closed my duplicate issue (#11465), but wanted to share my reproduction link which allows you to switch between Vuetify versions to see how functionality changed between 2.2.26 and 2.2.27:

Reproduction Link

https://codesandbox.io/s/data-table-custom-filtering-experiments-qhscz?file=/src/components/Playground.vue

[artzaik]

Is this bug fixed in 2.2.31?

[MatthiasDamm]

no

[mk86]

It looks like the problem is the result is the union of both queries.
For example, on the example in the docs, if you enter a filter of (less than) 300, and "EA" in the search box, it will show everything which EITHER matches the search term OR the column filter. This is clearer if you add the column filter value first and then EA - instead of refining the results, the list grows!
So the reason the search box doesn't reduce the number of items initially is because the column filter is not removing anything - so they are already all included and the search term has nothing left to add.

Can you confirm that the expected behaviour would be for the displayed items to be the intersection of the search terms, rather than the union? I.e. in my example above, it would show only "Ice Cream Sandwich", since that has <300 cals AND contains "ea".

If so, I can take a look (though I am totally new to Vue and Typescript, so... we'll see!)

[hackerESQ]

@mk86 exactly right. Currently, the search and filter result in a "union" of the two. However, the expected functionality is really an intersection of both the search and filter. In which case, only Ice Cream Sandwich should show with "EA" as the search and "300" as the column filter.

It seems like a change that happened here and I haven't had the time to try and troubleshoot.

[mk86]

PR raised - hope that's ok. Though Travis state isn't updating for some reason.

[hackerESQ]

@mk86 works like a charm. Great work!