Hero component failed to render after removing text

See https://git.drupalcode.org/project/experience_builder/-/blob/0.x/compone... — heading is required. So then the "failed to render" message is normal.

This seems like another case where deleting the required value should restore the original example.

But … we discussed this 2 days ago, and didn't we agree that we'd go for exactly this behavior everywhere, as a way to convey: "dear user, you removed a required input, so of course it cannot render" — where that is shown to the user in:

1. client-side validation in the component instance form
2. the preview (which you're reporting here)
3. the "Publish all changes" button will report this same validation error

So … what's the bug? 🤔

Would like Ben's assessment on this — do you agree, Ben?

After removing the heading from the hero component, a frontend validation error is correctly displayed. However, if the user switches tabs and attempts to edit another field, the component fails to render. This could be improved from a user experience perspective.
Ideally, the component should not fail to render when a required field is left blank. Instead, the error should be shown when the user tries to publish changes with an empty heading field.
In my view, adding validation for required fields during publishing is one issue, while the component failing when text is removed from a required field is a separate concern and which is not a good user experience.

Ideally, the component should not fail to render when a required field is left blank.

I disagree, if a component has an invalid prop, it shouldn't be rendering. That said, the. component should do a better job informing the user why it isn't rendering, which we will address here:

📌 Invalid prop errors should be detailed in Component preview Active

I don't think the current UX is acceptable; invalid form value should not result in the component rendering an error.

I'm wondering why are we throwing an error instead of rendering the component with the empty string? JSON Schema required allows empty string so the component itself should be able to render with that.

Even though JSON Schema allows that, we could enforce a stronger validation and show it as a validation error on the form / review changes panel, but that could be separate from the rendering part.

@lauriii we discussed this at length with a big group while you were on PTO. 📌 Invalid prop errors should be detailed in Component preview Active is what @effulgentsia, @bnjmnm, myself and others arrived at.