feat(Forms): auto-open Form.Section container when fields have errors and add validateInitially prop

[tujoworker]

This feature allows a dev to put on a Form.Section. When a field inside has an error/ or is validating negatively, the section will automatically switch to edit mode and show these errors, without pressing submit on the form.

Demo.

Quick example:

<Form.Section
  path="/nestedPath"
  required
  validateInitially
>
  <MyEditContainer />
  <MyViewContainer />
</Form.Section>

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2024 9:23am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[andlbrei]

That was quick 😄
Looks good 👍

[tujoworker]

Here is a quick demo/example (have not tested it yet): https://eufemia-git-feat-section-error-mode-eufemia.vercel.app/uilib/extensions/forms/Form/Section/demos/#show-errors-on-the-whole-section

[andlbrei]

The edit container opens fine 👍
Cancel is allowed though, which I guess it shouldn't be 🤔 if we want to force the user to fix the errors

[langz]

Looks good :)

Is it a potential error that when pressing the code button under the example, the screen sort of flashes?
Or is it just because of some scroll and/or animation stuff?

Screen.Recording.2024-08-28.at.20.59.21.mov

Further, just a nitpick, but it's a bit unfortunate that it autoscrolls to the new example when visiting the docs https://eufemia-git-feat-section-error-mode-eufemia.vercel.app/uilib/extensions/forms/Form/Section/
Makes it so that we can't link to other headings in the same docs, like https://eufemia-git-feat-section-error-mode-eufemia.vercel.app/uilib/extensions/forms/Form/Section/#overwrite-props, as it will autoscroll to our new example.

Could that also be a problem in an application, or something they would/could opt-out of?
Let's say if you enter a page, and on the bottom of the page they have this form with validateFieldsInitially, would it automatically scroll the user down to the bottom of the page?

[langz]

Just to be curious, this of course requires that all fields used in the form.section supports/has the validateInitially property, right?

If so, is it so that this validateInitially property is automatically supported in all our fields, or do we have to manually add support for this in all our fields? Further, if other applications make their own fields, do they have to do anything to support this prop validateInitially? If so, could we make it clear in our docs that we and/or apps should/must support the validateInitially property?

[tujoworker]

@andlbrei Nice finding – the latest commit should fix it. But I have not tested it. Can you check it out?

[tujoworker]

Just to be curious, this of course requires that all fields used in the form.section supports/has the validateInitially property, right?

@langz Actually no.

And if a dev makes their own Field, they should use the useFieldProps hook. This is documented here. And with that, the validateInitially is supported. But it is not based on that in this PR. The "magic" happens within the error boundary and in the useFieldProps hook via the showBoundaryErrors variable.

[tujoworker]

it's a bit unfortunate that it autoscrolls to the new example when visiting the docs https://eufemia-git-feat-section-error-mode-eufemia.vercel.app/uilib/extensions/forms/Form/Section/

Very true, we should not set focus when it opens initially. Will have to fix it + test.

[andlbrei]

@tujoworker works fine now 👍

[tujoworker]

@andlbrei How about renaming the prop from validateFieldsInitially to:

• containerMode="validate-fields-initially" or
• containerMode="open-when-fields-error" or
• containerMode="openWhenFieldsError"

[andlbrei]

@tujoworker I have no objections to that 👍

[tujoworker]

Then I think we go for containerMode="openWhenFieldValidationError" – its pretty long, but it describes what its doing. That I think is important.

[andlbrei]

@tujoworker Looks very good now 👍 I like the default to auto, that might make a lot of sense.

[langz]

@tujoworker You write "To make these errors "visible", you can add validateInitially to the section." While the behaviour seems to be like the code documentation says: "When set to openWhenFieldValidationError, the mode will initially be "edit" if fields contain errors. Fields will then automatically get validateInitially and show their error messages."

validateInitially does not seem to be a valid prop on Form.Section.

To re-state the use case I have discussed previously: We have some data we fetch before rendering the form. Sometimes a section will be populated with this pre-loaded data, in which case view mode is what I want, and sometimes the section will need to be filled out by the user because we do not have any stored data from the user, in which case we want edit mode. This is attainable by using openWhenFieldValidationError.

So the validation error in this case is pretty specific; it is simply for required fields that are empty.

In this case I would prefer the section to open in edit mode if there are errors, using mode="openWhenFieldValidationError" and not show any error messages. I just want to guide the user to fill inn fields where they are missing, and if they try to finish editing the section while there still are errors, then I'd like them to get the error messages.

However, let's say the pre-loaded data has the wrong format, then it might be best to display the error message straight away. I would think that this would be possible using validateInitially on the respective fields within the section, but that assumption might not be correct.

@andlbrei, thanks so much for testing and giving feedback, I see that both you and I did not test the latest commit of @tujoworker as it wasn't pushed until recently.
Do you have the time to quickly check if the feedback you gave in this comment is still valid when testing now?

https://eufemia-git-feat-section-error-mode-eufemia.vercel.app/uilib/extensions/forms/Form/Section/#show-errors-on-the-whole-section

[andlbrei]

@langz I did it while you wrote your message I think 😅

[langz]

it's a bit unfortunate that it autoscrolls to the new example when visiting the docs https://eufemia-git-feat-section-error-mode-eufemia.vercel.app/uilib/extensions/forms/Form/Section/

Very true, we should not set focus when it opens initially. Will have to fix it + test.

I think this "issue" is back again, when testing in the deploy preview now, it autoscrolls to a different example/header than what I'm linking to(linking to usage header, but scrolls to something else): https://eufemia-git-feat-section-error-mode-eufemia.vercel.app/uilib/extensions/forms/Form/Section/#usage

Screen.Recording.2024-09-11.at.12.15.30.mov

[langz]

Looks very good now, I love the API improvements, great work ❤️

Just one thought/question, what will happen if setting validateInitially={true} on Form.Section which has a single field with validateInitially={false}, which property dictates if the field will be validated initially? Perhaps we should add a test for the answer of this question?

[tujoworker]

Perhaps we should add a test for the answer of this question?

Done.

[tujoworker]

I think this "issue" is back again

Ohh noo. But added a better test and fix ✅

[langz]

🥇

[tujoworker]

🎉 This PR is included in version 10.48.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀