react-admin
react-admin copied to clipboard
Filter's required validator is ignored if filter value was never set
I have a REST API endpoint GET /v1/runs returning paginated list of Run objects, which has mandatory query params since (datetime) and search_query (text with minimal length). If I call this endpoint without any of these query params set, it will return 422 error.
I've added a component RunGrid using List + Datagrid under the hood. List has 2 filters with required() validator. DataProvider converts filters to query params, and then passes them to fetch() function.
What you were expecting:
If any required filter does not pass validation, getList query should not be send. Only then user set all required filters, ReactAdmin should call API endpoint with these filters.
What happened instead:
When I open page with RunGrid component, ReactAdmin calls getList method of DataProvider even then both required filters have no values, resulting an error notification being shown to user.
But when I fill up filter and then remove its value, then validation is performed as expected, and no requests are send until I pass a valid value to filter.
Steps to reproduce:
- Create component with List filters=... containing a filter with
required()validator - Open a page rendering this component
- Filter is not being set, but there are no validation errors, and query is being send anyway
- Fill up the filter, and then remove entered value. Validation is performed correctly
Related code:
import { ReactElement } from "react";
import {
List,
TextField,
TopToolbar,
SelectColumnsButton,
SearchInput,
required,
minLength,
DatagridConfigurable,
DateField,
DateTimeInput,
ChipField,
} from "react-admin";
const RunGridActions = () => (
<TopToolbar>
<SelectColumnsButton />
</TopToolbar>
);
const runFilters = [
<DateTimeInput
source="since"
alwaysOn
validate={required()}
resource="runs"
/>,
<SearchInput
source="search_query"
alwaysOn
validate={[required(), minLength(3)]}
resource="runs"
/>,
];
const RunGrid = (): ReactElement => {
return (
<List actions={<RunGridActions />} filters={runFilters}>
<DatagridConfigurable bulkActionButtons={false}>
<DateField source="started_at" showTime={true} />
<ChipField source="status" />
</DatagridConfigurable>
</List>
);
};
export default RunGrid;
Other information:
If there are required filters, when validation should be performed before any dataProvider interaction.
Environment
- React-admin version: 5.3.0
- Last version that did not exhibit the issue (if applicable):
- React version: 18.3.1
- Browser: Mozilla Firefox 132.0b7
- Stack trace (in case of a JS error):