Fixes form reinitialization on language change (#3229)

[AbhigyanSrivastav]

Fixes #3229

Changes:

• Introduced a formUpdateKey state to force form reinitialization
• Added useEffect hook to update formUpdateKey when language changes
• Set formUpdateKey as the key prop for the Form component to ensure remount

This change ensures that the form reinitializes properly when the language is switched, even if error messages were displayed in the previous language.

I have verified that this pull request:

• has no linting errors (npm run lint)
• has no test errors (npm run test)
• is from a uniquely-named feature branch and is up to date with the develop branch.
• is descriptively named and links to an issue number, i.e. Fixes #3229

[raclim]

Thanks for taking a look into this!

I feel like this is a good start to fixing this issue, but while testing this out I noticed that this seems to refresh the entire form and return it to its default state, removing the text input and the error messages. While this does resolve the issue, I think a more complete solution would be to find a way to update just the errors instead of the whole Form component!

[AbhigyanSrivastav]

Thanks for taking a look into this!

I feel like this is a good start to fixing this issue, but while testing this out I noticed that this seems to refresh the entire form and return it to its default state, removing the text input and the error messages. While this does resolve the issue, I think a more complete solution would be to find a way to update just the errors instead of the whole Form component!

Hey thanks for the feedback ,i have taken look at it and found a solution to implement as you said and i have tested in my dev environment and its working fine with the requirements.

[raclim]

Thanks for the updates! The functionality seems closer to what I feel like we're looking for!

It could probably be refactored down further—for example, maybe since there's a lot of shared code between these two components, there could be a separate utility hook to handle language change? I personally think it could happen either in this PR or a separate one though. It might be good to go after some of the comments are removed!

[AbhigyanSrivastav]

Thanks for the updates! The functionality seems closer to what I feel like we're looking for!

It could probably be refactored down further—for example, maybe since there's a lot of shared code between these two components, there could be a separate utility hook to handle language change? I personally think it could happen either in this PR or a separate one though. It might be good to go after some of the comments are removed!

Hey I have extracted the common code into a custom hook(usePreserveFormValuesOnLanguageChange) with the explanation of its usage in the comments above it in the custom-hooks.js and cleaned the comments and repeated code from the login and signup file.

[raclim]

Thanks so much for the updates!

I added in a few changes— I thought the usePreserveFormValuesOnLanguageChange hook could probably be used in other areas of the editor that also validates field inputs (i.e the Account Settings page), so I moved the location of the hook to the common folder. I also changed the name of the hook to useSyncFormTranslations because although the original title was specific and descriptive, I thought it might be a little long!

I think this overall looks good to me! There's probably a few other areas where this could be more concise, but I think it could be a separate PR! Thanks so much again for your work on this and please feel free to follow up with any additional changes you would like to make here!

[raclim]

Sorry, I also added updates to the LoginForm test with my changes to the hook!