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

useFilterState does not update permanentFilter value if changed #4473

Closed
fancyaction opened this issue Mar 4, 2020 · 3 comments
Closed

useFilterState does not update permanentFilter value if changed #4473

fancyaction opened this issue Mar 4, 2020 · 3 comments

Comments

@fancyaction
Copy link
Contributor

fancyaction commented Mar 4, 2020

What you were expecting:
If I use ReferenceInput with AutocompleteInput and set filter prop (aka permanentFilter) to a variable, data filter should update alongside the variable.

Example: I have user select input for author_id, in the following ReferenceInput->AutoComplete Input for books I want to filter for whatever author_id was selected (pulling value either from formState.values or FormDataConsumer's formData) and filterToQuery on book's title:
filter={ formData && formData.author_id ? {author_id: formData.author_id} : {} }
filterToQuery={(searchText: string) => ({ title: searchText })}

What happened instead:
useFilterState is always setting permanentFilter to whatever it originally loaded in with. In the above case, it will always be undefined because formData.author_id doesn't update until user selects author. Once they select author_id=23 it will still be read from the original undefined value.

Steps to reproduce:
Set a RefeneceInput's filter prop to another input on form (see above example or CodePen below)

Related code:
Please go to posts -> PostCreate.js for code example:
https://codesandbox.io/s/focused-snyder-ereg7

It's hard to demonstrate fully with data set there but if you open console you'll see on tag_id select an initial call is made with "filter":{"tag_id":16,"body":""}} but every following call looks like "filter":{"body":"test"}} because tag_id (taken from dataForm.tag_id) is read as undefined in useFilterState.

       <ReferenceInput label="Tag" source="tag_id" reference="tags">
          <AutocompleteInput />
        </ReferenceInput>
        <FormDataConsumer>
          {({ formData, ...rest }) => (
            <ReferenceInput
              label="Comment"
              source="comment_id"
              reference="comments"
              filter={{ tag_id: formData.tag_id }}
              // filter={formData.tag_id ? { tag_id: formData.tag_id } : {}}
              filterToQuery={searchText => ({ body: searchText })}
              {...rest}
            >
              <AutocompleteInput
                shouldRenderSuggestions={val => 2 < val.trim().length}
                optionText="body"
              />
            </ReferenceInput>
          )}
        </FormDataConsumer>

Other information:
In useFilterState, replacing permanentFilter with permanentFilterProp.current (e.g. latest filter prop value) in setFilterValue seems to fix but unsure if that could cause issues elsewhere.

This may very well relate to issue #3921

This is my first issue here so please let me know if I can clear anything up. React-Admin is an invaluable part of my team's app and we very much value all the hard work you do here!

Environment

  • React-admin version: 3.2.3
  • Last version that did not exhibit the issue (if applicable): It seems this came with the major hooks 3.0 update. This worked before.
  • React version: 16.12.0
  • Browser: Chrome
@djhi
Copy link
Contributor

djhi commented Mar 9, 2020

Thanks for reporting. Would you sending a pull request to fix it ?

@fzaninotto
Copy link
Member

Probably fixed by #4650

@Kmaschta
Copy link
Contributor

Kmaschta commented Apr 7, 2020

@fancyaction You'll be able to check if your issue is fixed with the 3.4.1, feel free to reopen if it's not the case

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

4 participants