CODEWITHSUNDEEP
react-admin
pedrodevoto
pedrodevoto

Reputation: 52

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

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!

Upvotes: 1

Views: 581

Answers (1)

François Zaninotto
François Zaninotto

Reputation: 7335

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

Upvotes: 1

Related Questions