[data grid] Input lag in GridToolbarQuickFilter on slowly typing

[ithrforu]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/pedantic-field-o02961?file=/src/App.js

https://codesandbox.io/s/adoring-lewin-i471nc?file=/src/App.js

Steps:

1. Open sandbox
2. Try to print in GridToolbarQuickFilter (slowly as possible)

Click to gif:

Current behavior 😯

Sometimes quick filter Input "eats" the last characters (with any debounceMs).

Expected behavior 🤔

Correct printing at any speed.

Context 🔦

There was a similar problem in #5283. Maybe GridToolbarQuickFilter need same fixed as #5646.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 💳 (optional)

48449

[m4theushw]

I managed to reproduce the bug in the DataGrid too.

msedge_G6c63Qi4qY.mp4

[ithrforu]

@m4theushw, do you know when will it get fixed or maybe workaround for the problem?

[m4theushw]

We can't provide an estimate yet. We still need to investigate what is causing this problem. It could related to the render phase taking too much time.

The workaround we can suggest is to increase the debounce with

<GridToolbarQuickFilter debounceMs={1000} />

In https://mui.com/x/react-data-grid/filtering/#parsing-values there's a demo showing how to customize the quick filter to pass this prop.

[ithrforu]

Is investigation continues? If not, i think issue can be closed because the workaround helped us a lot.

[oliviertassinari]

This issue makes the search experience really not great, thanks for raising 👍 !

---

Off-topic

While this issue is about "Correct printing at any speed", it feels well related to my comment in #9120 (comment) with @romgrk. We have a 500ms input debounce that feels like a massive time waste, it makes it impossible for the search to feel responsive.

mui-x/packages/grid/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx

Line 74 in df534be

debounceMs = 500,

mui-x/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx

Line 8 in 82ab9c0

export const SUBMIT_FILTER_STROKE_TIME = 500;

Even Google Maps reacts a lot faster to search queries. I think that we could explore this instead:

• lower the debounce to 50ms, we would save 450ms! (0ms would probably be fine too), for comparison, the description of [DataGrid] Filtering performance #9120 talks about a win of up to 300ms.
• turn the search to be performed in chunks, to yield to the main thread every now and then
• start the search as soon as the end of the 50ms debounce but if a new search is input before the end of the previous one, interrupt it and restart from scratch.

[romgrk]

Linked #9157

[oliviertassinari]

Great to see this bug fixed 👌

I created an issue for the above idea #9657