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

Remove list's setFilters default debounce #9682

Merged
merged 10 commits into from
Feb 27, 2024
24 changes: 2 additions & 22 deletions docs/FilteringTutorial.md
Original file line number Diff line number Diff line change
@@ -543,14 +543,14 @@ const PostFilterForm = () => {

const onSubmit = (values) => {
if (Object.keys(values).length > 0) {
setFilters(values, undefined, false);
setFilters(values, undefined);
} else {
hideFilter("main");
}
};

const resetFilter = () => {
setFilters({}, [], false);
setFilters({}, []);
};

return (
@@ -626,23 +626,3 @@ export const PostList = () => (
**Tip**: No need to pass any `filters` to the list anymore, as the `<PostFilterForm>` component will display them.

You can use a similar approach to offer alternative User Experiences for data filtering, e.g. to display the filters as a line in the datagrid headers.

## Using `setFilters` With Other List Context Methods

The `setFilters` method takes three arguments:

- `filters`: an object containing the new filter values
- `displayedFilters`: an object containing the new displayed filters
- `debounced`: set to false to disable the debounce (true by default)

So `setFilters` is debounced by default, to avoid making too many requests to the server when using search-as-you-type inputs.

When you use `setFilters` and other list context methods (like `setSort`) in a single function, you must disable the debounce. Otherwise, the `setFilters` call would override the other changes.

```jsx
const changeListParams = () => {
setSort({ field: 'name', order: 'ASC' });
// The 3rd parameter disables the debounce ⤵
setFilters({ is_published: true }, undefined, false);
};
```
17 changes: 2 additions & 15 deletions docs/useListContext.md
Original file line number Diff line number Diff line change
@@ -121,7 +121,7 @@ The `setFilters` method is used to update the filters. It takes three arguments:

- `filters`: an object containing the new filter values
- `displayedFilters`: an object containing the new displayed filters
- `debounced`: set to false to disable the debounce (true by default)
- `debounced`: set to true to debounce the call to setFilters (false by default)

You can use it to update the filters in a custom filter component:

@@ -142,8 +142,7 @@ const CustomFilter = () => {

const handleSubmit = (event) => {
event.preventDefault();
// The 3rd parameter disables the debounce ⤵
setFilters(filterFormValues, undefined, false);
setFilters(filterFormValues, undefined);
};

return (
@@ -157,18 +156,6 @@ const CustomFilter = () => {
};
```

Beware that `setFilters` is debounced by default, to avoid making too many requests to the server when using search-as-you-type inputs. In the example above, this is not necessary. That's why you should set the third argument to `setFilters` is set to `false` to disable the debounce.

Disabling the debounce with the third parameter is also necessary when you use `setFilters` and other list context methods (like `setSort`) in a single function. Otherwise, the `setFilters` call would override the other changes.

```jsx
const changeListParams = () => {
setSort({ field: 'name', order: 'ASC' });
// The 3rd parameter disables the debounce ⤵
setFilters({ is_published: true }, undefined, false);
};
```

## TypeScript

The `useListContext` hook accepts a generic parameter for the record type:
17 changes: 2 additions & 15 deletions docs/useListController.md
Original file line number Diff line number Diff line change
@@ -261,7 +261,7 @@ The `setFilters` method is used to update the filters. It takes three arguments:

- `filters`: an object containing the new filter values
- `displayedFilters`: an object containing the new displayed filters
- `debounced`: set to false to disable the debounce (true by default)
- `debounced`: set to true to debounce the call to setFilters (false by default)

You can use it to update the list filters:

@@ -282,8 +282,7 @@ const OfficeList = () => {

const handleSubmit = (event) => {
event.preventDefault();
// The 3rd parameter disables the debounce ⤵
setFilters(filterFormValues, undefined, false);
setFilters(filterFormValues, undefined);
};

if (isLoading) return <div>Loading...</div>;
@@ -305,15 +304,3 @@ const OfficeList = () => {
);
};
```

Beware that `setFilters` is debounced by default, to avoid making too many requests to the server when using search-as-you-type inputs. In the example above, this is not necessary. That's why you should set the third argument to `setFilters` is set to `false` to disable the debounce.

Disabling the debounce with the third parameter is also necessary when you use `setFilters` and other list controller methods (like `setSort`) in a single function. Otherwise, the `setFilters` call would override the other changes.

```jsx
const changeListParams = () => {
setSort({ field: 'name', order: 'ASC' });
// The 3rd parameter disables the debounce ⤵
setFilters({ is_published: true }, undefined, false);
};
```