Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReferenceManyField ignores filter debounce #9517

Closed
Pharb opened this issue Dec 12, 2023 · 1 comment · Fixed by #9523
Closed

ReferenceManyField ignores filter debounce #9517

Pharb opened this issue Dec 12, 2023 · 1 comment · Fixed by #9523
Labels

Comments

@Pharb
Copy link

Pharb commented Dec 12, 2023

What you were expecting:

ReferenceManyField has same filter debounce behavoir as normal list context.

Documentation:

<ReferenceManyField> creates a ListContext with the related records, so you can use any component relying on this context (<Datagrid>, <SimpleList>, etc.).

What happened instead:

No debounce effect when using ReferenceManyField with filters.

Steps to reproduce:

Screenshot 2023-12-12 at 19 58 48

To reproduce in the sandbox I basically added FilterLiveSearch to PostShow.tsx:

            <ReferenceManyField
              reference="comments"
              target="post_id"
              sort={{ field: 'created_at', order: 'DESC' }}
            >
+             <FilterLiveSearch source="body" />
              <Datagrid>
                <DateField source="created_at" />
                <TextField source="author.name" />
                <TextField source="body" />
                <EditButton />
              </Datagrid>
            </ReferenceManyField>

Related code:

To me it looks like the implementation of useReferenceManyFieldController ignores the debounce parameter of setFilters:

// Example generic code to set filters:
const { setFilters } = useListContext();

// ListControllerResult defines:
    setFilters: (
        filters: any,
        displayedFilters: any,
        debounce?: boolean
    ) => void;

// Inside <List> this correctly returns:
    const setFilters = useCallback(
        (filter, displayedFilters, debounce = true) =>
            debounce
                ? debouncedSetFilters(filter, displayedFilters)
                : changeParams({
                      type: SET_FILTER,
                      payload: {
                          filter: removeEmpty(filter),
                          displayedFilters,
                      },
                  }),
        [changeParams] // eslint-disable-line react-hooks/exhaustive-deps
    );

// Inside <ReferenceManyField> it instead returns:
    const setFilters = useCallback(
        (filters, displayedFilters) => {
            setFilterValues(removeEmpty(filters));
            setDisplayedFilters(displayedFilters);
            setPage(1);
        },
        [setDisplayedFilters, setFilterValues, setPage]
    );
// NOTE: inside useReferenceManyFieldController the third parameter `debounce` is ignored

Other information:

Environment

  • React-admin version: 4.16.2
  • Last version that did not exhibit the issue (if applicable): -
  • React version: 18.2.0
  • Browser: Chrome
  • Stack trace (in case of a JS error): -
@djhi
Copy link
Collaborator

djhi commented Dec 13, 2023

Indeed. This is actually the case for many components that provide a ListContext

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants