react-admin icon indicating copy to clipboard operation
react-admin copied to clipboard

Filter's required validator is ignored if filter value was never set

Open dolfinus opened this issue 1 year ago • 0 comments

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.

Image

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.

Image

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.

Image

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

dolfinus avatar Oct 20 '24 08:10 dolfinus