mui
[data grid] `onFilterModelChanged` fires with degenerate (`value`-less) filters
Duplicates
- [X] I have searched the existing issues
Latest version
- [X] I have tested the latest version
Steps to reproduce 🕹
See Stackblitz demo.
Current behavior 😯
After clicking on the filter menu option to open up the filter panel dialog, the onFilterModelChange fires immediately with a sort of degenerate item lacking the value key, e.g.
{
field: "rating",
id: '1234',
operator: "="
}
I wonder if this behavior is by design, or a byproduct? I guess we need to do this for intransitive operators (like isEmpty) that don't take a value argument. But do we need to fire it on the degenerate filter item above, which has no effect?
In what I suspect is the same issue under the hood, when I have a large set of records (say, 100k+), merely opening the filter dialog (or, e.g., clicking on the + ADD FILTER button) causes the screen to freeze for a second or two while the grid (presumably) re-renders. Obviously I expect the grid to take some time to do the actual filtering, but the user experience is degraded when there's a noticeable delay just clicking the + ADD FILTER button. (Have not reproduced this large-data issue on Stackblitz but I can if desired.)
Expected behavior 🤔
I expected onFilterModelChange to fire when I actually select something in the dialog and thus have a "real* filter that actually performs filtering -- not simply on first opening the dialog. Similarly, after clicking on + ADD FILTER, I would expect the new row to open immediately, and not to actually do any filtering until there's a value there to filter on.
Context 🔦
I have an existing set of custom filtering widgets that operate on their own filter model, and I'm trying to interface it with the MUI version so that the filters sync both ways. My filter model is very similar to MUI's (they're a boolean expression object with a list of filtering operations on specific fields), so the translation is pretty straightforward -- except that my model doesn't have the notion of this "empty" or "degenerate" filter, and will require changes to be able to handle that. More importantly, with my model, setting a new filter is a relatively expensive operation[^1], so it's definitely better for me to not fire onFilterModelChange until I actually have to.
[^1]: Setting a new filter is done at context, the top level, and thus triggers (1) a re-rendering of everything on the page, and (2) an expensive round of calculations to derive counts about how many records are affected by each filter.
Your environment 🌎
npx @mui/envinfo
System:
OS: Linux 5.15 Linux Mint 21 (Vanessa)
CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
Memory: 2.65 GB / 15.32 GB
Container: Yes
Shell: 5.8.1 - /usr/bin/zsh
Binaries:
Node: 16.15.0 - ~/.nvm/versions/node/v16.15.0/bin/node
Yarn: 3.2.4 - ~/.yarn/bin/yarn
npm: 8.5.5 - ~/.nvm/versions/node/v16.15.0/bin/npm
Managers:
Utilities:
CMake: 3.22.1 - /usr/bin/cmake
Make: 4.3 - /usr/bin/make
GCC: 11.3.0 - /usr/bin/gcc
Git: 2.34.1 - /usr/bin/git
Ninja: 1.10.1 - /usr/bin/ninja
FFmpeg: 4.4.2 - /usr/bin/ffmpeg
Virtualization:
Docker: 23.0.1 - /usr/bin/docker
IDEs:
Nano: 6.2 - /usr/bin/nano
Vim: 0.9.0 - /usr/bin/vim
Languages:
Bash: 5.1.16 - /usr/bin/bash
Perl: 5.34.0 - /usr/bin/perl
Databases:
Browsers:
* Chromium: 110.0.5481.100
Firefox: 110.0.1
Monorepos:
Yarn Workspaces: 3.2.4
Lerna: 5.6.2
Order ID or Support key 💳 (optional)
46840
I wonder if this behavior is by design, or a byproduct?
Yes, it's by design. We call onFilterModelChange because the filter model is changed to add a new filter item (or change the existing one) when clicking in a column to filter it.
In what I suspect is the same issue under the hood, when I have a large set of records (say, 100k+), merely opening the filter dialog (or, e.g., clicking on the + ADD FILTER button) causes the screen to freeze for a second or two while the grid (presumably) re-renders.
This is a bug. We're applying the filters even if the filter model contains items without a value. We should fix this part. The exception is if it contains a filter that doesn't take a value, e.g. "is empty".
Guessing this didn't get looked at? I'm seeing some state changes before the user entered a value.
newFilterModel {
"items": [
{
"field": "unit",
"operator": "is",
"id": 83831
}
],
"logicOperator": null
}
So i'm not sure how to infer if the user has completed their filter choice
We are still having this issue in "@mui/x-data-grid-pro": "7.8.0". Is there any workaround?
