fix(FormProvider): ensure formKey properly remounts form state (MET-2671) - #57
Merged
Conversation
…sue. Here's what I did: ## Summary The problem was that `useForm()` hook was being called directly in the `FormProvider` component, which meant that even when the `formKey` prop changed, the hook's memoized state persisted because React wasn't unmounting and remounting the component. ## Solution I created an internal `FormWrapper` component that: 1. Contains the `useForm()` hook call 2. Wraps the `MemoDataProvider` 3. Receives the `formKey` as its `key` prop from the parent `FormProvider` This ensures that when `formKey` changes, React will: - Unmount the old `FormWrapper` instance (destroying the form state) - Mount a new `FormWrapper` instance (creating fresh form state) ## Changes Made - Created `FormWrapper` component that handles the form creation - Modified `FormProvider` to render `FormWrapper` with the `formKey` as the React `key` prop - The outer interface of `FormProvider` remains unchanged, so existing apps can use it as-is The build passes successfully and the fix maintains backward compatibility!
## Changes Made 1. **Renamed component and interface** (`FormProvider.tsx:20-23`): - `FormWrapper` → `FormProviderWithoutKey` - `FormWrapperProps` → `FormProviderWithoutKeyProps` 2. **Used spread operator** (`FormProvider.tsx:53-54`): - Destructured `formKey` from props - Used `...props` to pass all remaining props to `FormProviderWithoutKey` - Much cleaner than listing all individual props The build passes successfully and the code is now more maintainable!
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
2 participants
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.
Summary
Fixed the FormProvider formKey behavior to properly reset form state when the formKey prop changes.
Problem
The
useForm()hook was being called directly in the FormProvider component. Even when theformKeyprop changed, the hook's memoized state persisted because React wasn't unmounting and remounting the component. This caused dirty form field values to remain even when form values should have been reset.Solution
Created an internal
FormProviderWithoutKeycomponent that:useForm()hook callMemoDataProviderformKeyas its Reactkeyprop from the parentFormProviderWhen
formKeychanges, React will:FormProviderWithoutKeyinstance (destroying the form state)FormProviderWithoutKeyinstance (creating fresh form state)Changes
FormProviderWithoutKeycomponent that handles form creationFormProviderto renderFormProviderWithoutKeywith theformKeyas the ReactkeypropFormProviderremains unchanged for backward compatibilityRelated
🤖 Generated with Claude Code