react-admin

react-admin copied to clipboard

What you were expecting: The value entered in the filter field is expected to be independent of the response from the dataProvider.

What happened instead: Instead, if you start typing a new filter value without waiting for a response from the old one, as there are asynchronous responses, the filter input "jumps", displaying the value that was in the previous request. This is especially noticeable on slow connections when using the q filter or input fields that use a mask.

Steps to reproduce:

• React-admin version: 3.9.6

Thanks for reporting this. Please provide a sample application showing the issue by forking the following CodeSandbox (https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple).

Unfortunately a sample application contains all the data in the client. There is no delay in receiving data, and it is not possible to show problems that appear when working with the network slowly. Do you have an example CodeSandbox where the data is taken from the network?

You can probably fake it in the dataProvider with a timeout, can't you?

good afternoon. I've modified codesandbox for demonstration. https://codesandbox.io/s/eloquent-wave-iu6jl?file=/src/dataProvider.js steps:

• rename the first 2 Posts for clarity as 2 boiler room and 3 boiler room
• enter in the search field 2 boiler room
• place the cursor in the search field after 2, remove the mouse from the field
• remove character 2, print 3
• without waiting for an answer, delete 3, print 2
• repeat the last 2 operations quickly

after a while, the cursor flies to the end of the value in the search field and you notice that you are entering boiler roo2

This is a race condition. I think I know what happens, but I don't know hot to fix it for now.

We use the URL as the single source of truth for filters. This allows developers to create links to filtered lists, and users to bookmark a filtered list.

That means that the FilterForm component initializes the form values based on the URL filter query parameter. And when this query parameter changes, the FilterForm reinitializes the inputs based on it. This allows the FilterForm to reflect the filter in the URL.

When users update the filter inputs in the form, this calls listContext.setFilters()`, which pushes a new query string to the location. So far, so good.

But we've debounced the the setFilters to avoid spamming the dataProvider on every keystroke. That means we've created a race condition:

1. User wants to look for the "foobar" string. They type "foo" in the search input and pause a bit
2. The setFilter is called. It waits 500ms for debounce
3. User continues typing without any pause, and the search input now contains "foobar"
4. Before the user stops typing (and therefore before a new call to setFilter kills the initial debounced one), and 500ms after 2., the setFilter function fires with "foo", which changes the URL
5. The filterForm reinintializes with the filter value from the URL, and therefore replaces "foobar" with "foo" in the search bar

This is a serious bug, but I don't see how we can fix it without removing the ability to change the filter from an URL. I'll have to think about it further. In the meantime, any help is welcome!

I cannot reproduce this issue anymore in the simple project with version 4.5.4 of react-admin

Hello, I have tried to create a CustomSearchInput as I have the exact same issue, probably because I am filtering 50K+ rows. Unfortunately, it doesn't work, as RA system seems to overcome any debounce/timeout I try to integrate...

@Revarh which version of react-admin are you using? Can you build a reproduction?

Hi,

Not sure if I can build a reproduction before next week.

I am using RA 4.16.18 and I work with RA-supabase 2.0.0

I am still investigating the issue but there is a good chance that the reason is the complexity of my own dataprovider.js since this happens only on a specific List. It displays a view table made to aggregate many other tables, with a total of 50K+ rows, and with some complex filters. On my other lists, the SearchFilter seems fine.

OK. Since this is a v3 bug and we cannot reproduce it for v4, we won't investigate unless you can provide a simple repro.

With the release of react-admin v5, react-admin v3 has reached its end of life. We won't fix bugs or make any new release on the 3.x branch. We recommend that you switch to a more recent version of react-admin.

So I'm closing this issue as we won't fix it.

@fzaninotto I am using v4, and users do complain for this situation in some filters when the endpoints are slow. Are you sure that this was not a problem in v4? Maybe in v5 this is now fixed? Thanks!

@aflip We couldn't reproduce it on v4 (see https://github.com/marmelab/react-admin/issues/5591#issuecomment-1332076072). If you can build a simple repro, please open a new issue with a link to your repro.

Note that react-admin v5 introduces Query Cancellation, which could be a solution for this issue.