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

Clearing filters using setFilter({}) does not clear FilterLiveSearch text input #9791

Open
greatwitenorth opened this issue Apr 23, 2024 · 2 comments

Comments

@greatwitenorth
Copy link

What you were expecting:
When I call setFilter({}) I expected it to clear out all filters and text inside the FilterLiveSearch input box.

What happened instead:
The filters are removed, but the text remains in the FilterLiveSearch input box. The results are not filtering by the text in FilterLiveSearch anymore.

Steps to reproduce:

  • Add a FilterLiveSearch component
  • Add a button to clear the filter
  • Click the button

Related code:
AssetFilterSidebar.jsx

  export const AssetFilterSidebar = (props) => {
    const { setFilters } = useListContext();

    const { data: catData, isLoading: catIsLoading } = useGetList('categories', {
      sort: { field: 'name', order: 'ASC' },
    });

    const { data: companyData, isLoading: companyIsLoading } = useGetList('companies', {
      sort: { field: 'name', order: 'ASC' },
    });

    return (
      <Card sx={{ order: -1, mr: 2, mt: 6, width: 300 }}>
        <CardContent>
          <SavedQueriesList/>
          <FilterLiveSearch source="company#name@_ilike,name@_ilike,serial@_ilike" />
          <Button onClick={() => {
            setFilters({});
          }}>Clear filters</Button>
          <FilterList label="Company" icon={<BusinessIcon/>}>
            {!companyIsLoading && companyData.map((company) => (
              <FilterListItem key={company.name} label={company.name} value={{ 'company#name@_eq': company.name }} />
            ))}
          </FilterList>
          <FilterList label="Category" icon={<CategoryIcon/>}>
            {!catIsLoading && catData.map((cat) => (
              <FilterListItem key={cat.name} label={cat.name} value={{ 'category#name@_eq': cat.name }} />
            ))}
          </FilterList>
        </CardContent>
      </Card>
    );
  };

Environment

  • React-admin version: 4.16.13
  • Last version that did not exhibit the issue (if applicable): na
  • React version: 18.2.0
  • Browser: chrome 124.0.6367.60
  • Stack trace (in case of a JS error): na
@erwanMarmelab
Copy link
Contributor

Hi @greatwitenorth. Stackblitz have some problems sometimes. You can reload it, wait more or open a new tab with the blank page url to force it to load.

I can't reproduce your bug, could you please try to make a reproduction on Stackblitz

@slax57
Copy link
Contributor

slax57 commented May 7, 2024

Alternatively you can also use codesandbox:
https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants