Fix ArrayInput root error display on conditional mount#11195
Fix ArrayInput root error display on conditional mount#11195
Conversation
packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx
Outdated
Show resolved
Hide resolved
…ies.tsx Co-authored-by: Thiery Michel <thiery@marmelab.com>
|
I opened a PR in react-hook-form that would improve this fix: react-hook-form/react-hook-form#13319. It would allow subscribing to submit state directly through Update: The PR has been merged |
| const { subscribe } = useFormContext(); | ||
|
|
||
| const [error, setError] = React.useState<any>(); | ||
| const { isSubmitted } = useFormState(); |
There was a problem hiding this comment.
Update RH to v.7.2.0 and use the new subscribe({ formState: ... }) ^^
| it('should not display a root-level array error immediately when mounted in onChange mode', async () => { | ||
| const submit = jest.fn(); | ||
|
|
||
| const FormWithConditionalArrayInput = () => { |
There was a problem hiding this comment.
use the component from the story to avoid duplication
| <Create> | ||
| <SimpleForm mode="onChange"> | ||
| <Alert severity="info" sx={{ mb: 2 }}> | ||
| Reproduction of bug 2: Displaying the ArrayInput should not |
There was a problem hiding this comment.
"bug 2" doesn't mean anything for a Storybook visitor
| <Alert severity="info" sx={{ mb: 2 }}> | ||
| Reproduction of bug 2: Displaying the ArrayInput should not | ||
| automatically mark it as invalid. The error should appear | ||
| only after actual interaction or an invalid submission. |
There was a problem hiding this comment.
When I opened this story, I didn't understand what it did or why it existed. You should make it clearer that to trigger validation, one should add then remove an item.
3 participants
Problem
ArrayInput is showing its root-level validation error as soon as it mounted in mode="onChange", which made conditionally rendered arrays appear invalid before any user interaction.
Solution
Extend the subscribed state used by ArrayInput so the root error is only displayed after the field has been interacted with, or after an invalid submit.
How To Test
Open the
ConditionalMountOnChangeValidationstory inra-ui-materialui/input/ArrayInputwith the fix temporarily removed fromArrayInput.tsxAdditional Checks
masterfor a bugfix or a documentation fix, ornextfor a feature