Fix <FilterLiveForm> compatibility with react-hook-form 7.55.0, part 2#10697
Merged
Fix <FilterLiveForm> compatibility with react-hook-form 7.55.0, part 2#10697
<FilterLiveForm> compatibility with react-hook-form 7.55.0, part 2#10697Conversation
Contributor
Author
|
Some E2E tests are failing, back to WIP |
Contributor
Author
|
Fixed, back to RFR! |
djhi
reviewed
Apr 25, 2025
Contributor
djhi
left a comment
There was a problem hiding this comment.
This looks good but maybe we should update react-hook-form to its latest version?
Contributor
Author
|
I agree but we should do that on |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Despite #10657, 2 issues are still present when using RHF version >= 7.55.0:
DatagridAG: Applying a filter from ag-grid, then leaving the page and coming back to it, then clearing all filters with the 'Remove all filters' button => brings back the filter added previously via ag-gridCloses #10695
Solution
It turns out the fix brought by #10657 was not enough.
In a nutshell, this fix made it so that the filter form is not reset if changed values only affect fields that are not part of the form. But the form was still initialized with
defaultValuesequal to thefilterValues, so external values could still leak into the form state.Part of the solution is then to remove the form
defaultValues, and rely only on theuseEffectto (selectively) apply them.Other part of the solution was to remove the
formChangesPendingref, as it turns out this workaround no longer works with RHF v7.55.0 onwards, because they tend to call theuseWatchcallback multiple times, even for fields whose value has not changed.Instead, properly managing the form state and only resetting when values known to the form are modified (i.e. part 1 of the fix above) seems to be enough to avoid re-applying old values.
How To Test
2 new stories were added:
Also, #10695 can be reproduced in story http://localhost:9010/?path=/story/ra-ui-materialui-list-filter-filterbutton--basic
Unit tests were added to cover all known issues.
=> Hence, to test the fix, I recommend:
yarn up react-hook-form, run the unit tests (make test-unit), the E2E tests (make test-e2e), and then play with the added stories (make storybook)Note: You will notice that some tests not related to filters are failing when using RHF v7.56.1, which is something we'll need to address in a future PR, but all tests related to filters should pass with this PR.
Additional Checks
masterfor a bugfix or a documentation fix, ornextfor a featureAlso, please make sure to read the contributing guidelines.