Skip to content

ReferenceManyField ignores filter debounce #9517

Closed
@Pharb

Description

@Pharb

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): -

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions