marmelab
Values of InputFields are not displayed in edit form if shouldUnregister is set
What you were expecting:
In an EditForm with an ArrayInput all input fields show the given record values. This also holds for conditionally rendered field values if the condition is fullfilled and the shouldUnregister property is set to true.
What happened instead:
Having the following complex EditForm.
There is an ArrayInput.
One field of the array elements is only conditionally rendered depending on the value of another. Then the value of the conditionally rendered input field is not displayed (even though the field itself is rendered). This only happens if the shouldUnregister property is set to true for the conditionally rendered input field.
We just upgraded from [email protected] (where everything worked) to [email protected] where the bug occurs. In both cases we use [email protected]
Steps to reproduce:
Open this code sandbox.
Go to the comments records and open one of the comments. The value in the field "Bar" is not shown even though we would expect to see "world" there. If the "shouldUnregister" property is removed in the CommentEdit.tsx (line 166) the value is displayed correctly. However, then we would lose the unregister functionality of the field.
Hint: Starting from the provided example code sandbox for v5 we only changed the data.tsx and CommendEdit.tsx to provide the example.
Environment
- React-admin version: 5.1.3
- Last version that did not exhibit the issue (if applicable): 4.16.20
- React version: 18.3.1
- Browser: Chrome, Firefox
Do you have an update on the issue? Or do you have a timeline when working on it? Thanks!
So I finally managed to track down the issue. It seems to only happen in development mode inside React.StrictMode. Still investigating to fix it.
We may have found a solution (see https://github.com/marmelab/react-admin/pull/10271) that seems to fix this particular issue. However, we also had to warn against this usage in the docs, as react-hook-form themselves do so:
shouldUnregister Note: this prop should be avoided when using with useFieldArray as unregister function gets called after input unmount/remount and reorder.
The most durable solution might be to use the transform prop instead to manually clean the submitted values.
In the end we reverted the change to useAugmentedForm, because it may have undesired side-effects. Besides, this seems to be a react-hook-form issue/limitation, so we don't believe we should try to fix it in react-admin.
Instead, the doc now encourages to use the transform prop instead.