KevinVandy / mantine-react-table

A fully featured Mantine V5 implementation of TanStack React Table V8, forked from Material React Table
https://www.mantine-react-table.com/
MIT License
848 stars 145 forks source link

Global Search Input Loses Characters During Typing #256

Open bnewman-tech opened 9 months ago

bnewman-tech commented 9 months ago

mantine-react-table version

1.3.4

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

Issue While typing in the global search input, some characters intermittently disappear as if the table is attempting to filter results before fully capturing the new search term. This behavior results in the search term being reset to a previous state, omitting the newly typed characters. The issue manifests at varying speeds, depending on how quickly the user types, leading to an inconsistent user experience.

Steps to Reproduce Navigate to the page with the mantine-react-table component. Focus on the global search input field. Begin typing a search term rapidly. Observe that some characters typed do not appear in the input field and are missing from the search term.

Minimal, Reproducible Example - (Optional, but Recommended)

It occurred on the demo here.

Global Filtering/Search Feature Guide - Mantine React Table Docs (mantine-react-table.com)

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

Eyuelb commented 9 months ago

@bnewman-tech do you try to use a custom context provider that uses useMemo to be changed only on if the request query is changed

bnewman-tech commented 8 months ago

After further investigation, I have observed that the issue is not isolated to the Mantine React Table alone. I've discovered that this behavior also occurs in the React Table examples themselves. This leads me to believe that the root cause of the intermittent disappearance of characters while typing in the global search input may be related to React Table's handling of input changes, rather than a specific implementation detail of the Mantine React Table.

React Table Filters Example | TanStack Table Docs

I have created an issue here. https://github.com/TanStack/table/issues/5348

ericblade commented 8 months ago

I don't know if there's a configuration parameter hiding anywhere to do this, but it might be desireable to add a parameter to provide how long to wait after a key is pressed before updating the search data. With a small table with only about 60 items in it, my fastest device displaying my table is starting to show signs of obvious lag while typing into the search box. And it's going to get worse. Adding another couple hundred ms before acting on the update would go a long way towards making the experience smoother. ofc that's not including if there's any additional performance to be squeezed out of the search algo