🐛 Bug Report: Double Error Display in Scaffolder Form

[terencenjr]

📜 Description

Hi,

I am writing a custom field extension with validation and I saw the errors displayed when validation fails. The errors are displayed once at the top and another time below the field. I am not sure if this is a bug or it is just a behavior by rsjf so pardon me if I have logged the issue under the wrong category.

👍 Expected behavior

I believe displaying errors once is sufficient. I do have a preference for it to be displayed under the TextField only.

👎 Actual Behavior with Screenshots

From the screenshot below, we can see that the errors are displayed below the steps' breadcrumb and below the TextField when validation failed.

👟 Reproduction steps

1. Create a string input within the form template
2. Configure the field to have validation
3. Import the template's catalog-info.yaml into Backstage
4. Launch the template
5. Input an invalid input
6. Click the Next/Review button
7. Error message is displayed

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

I'm using Backstage version 1.21.0.

👀 Have you spent some time to check if this bug has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [X] I have read the Code of Conduct

Are you willing to submit PR?

Yes I am willing to submit a PR!

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[acierto]

@benjdlambert maybe we can make it configurable?

[benjdlambert]

@acierto do you wanna raise a PR making this configurable on the Stepper component? Not sure we want to add these props to the router yet.

[stephenglass]

I'm also interested in this being configurable. In my case, I actually only want the stepper error to appear and not the error below the component. This is because I'm doing my own validation in my custom field extension. I only need validation to prevent user from moving onto next step. Also, on this topic the ".propertyName " formatting of the error is quite odd when you think about an end user seeing it. It should be converted into a readable string like it does on the review page.

@benjdlambert @acierto I can also try to help on a PR for this

[acierto]

@stephenglass That would be nice! ❤️

[camilaibs]

@stephenglass have you had a chance to work on this? I would like to confirm if we could assign the issue to you 🙂

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.