react-admin - Stop List's Filters from submitting "onChange" - react-admin

Question

Is there a way to have a List's filters not submit automatically on every field's change? I'm trying to implement a reporting resource and it would be ideal to have the user set the filters they want and then submit the form, to have the report generated, as they tend to be heavy on the DB.
Thanks!

Answer 1

React-admin's <Filter> component does not submit after every field change, because it uses a debouncing function to submit only once the user has stopped typing.
That being said, if you don't want the filter form to auto-submit, but prefer a filter form with an explicit submit button, you'll have to build a custom <Filter> component yourself - react-admin doesn't provide such a component.
Here is an example custom filter form:
import * as React from 'react';
import { Form } from 'react-final-form';
import { Box, Button, InputAdornment } from '#material-ui/core';
import SearchIcon from '#material-ui/icons/Search';
import { TextInput, NullableBooleanInput, useListContext } from 'react-admin';
const PostFilterForm = () => {
const {
displayedFilters,
filterValues,
setFilters,
hideFilter
} = useListContext();
if (!displayedFilters.main) return null;
const onSubmit = (values) => {
if (Object.keys(values).length > 0) {
setFilters(values);
} else {
hideFilter("main");
}
};
const resetFilter = () => {
setFilters({}, []);
};
return (
<div>
<Form onSubmit={onSubmit} initialValues={filterValues}>
{({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<Box display="flex" alignItems="flex-end" mb={1}>
<Box component="span" mr={2}>
{/* Full-text search filter. We don't use <SearchFilter> to force a large form input */}
<TextInput
resettable
helperText={false}
source="q"
label="Search"
InputProps={{
endAdornment: (
<InputAdornment>
<SearchIcon color="disabled" />
</InputAdornment>
)
}}
/>
</Box>
<Box component="span" mr={2}>
{/* Commentable filter */}
<NullableBooleanInput helperText={false} source="commentable" />
</Box>
<Box component="span" mr={2} mb={1.5}>
<Button variant="outlined" color="primary" type="submit">
Filter
</Button>
</Box>
<Box component="span" mb={1.5}>
<Button variant="outlined" onClick={resetFilter}>
Close
</Button>
</Box>
</Box>
</form>
)}
</Form>
</div>
);
};
This is documented at: https://marmelab.com/react-admin/List.html#building-a-custom-filter
Edit 2021-11-10: Added example and link to documentation