Broken FormItem

[reqyou]

Hey everyone,
I just noticed that a wrapped FormItem inside the default Form isn't styled properly. Its missing the default FlexBox behavior. Does anyone why this is happening? Is this intended?

I've attached a demo.

codesandbox

Best,
req

[Lukas742]

Hi @reqyou

using components other than FormItem or FormGroup as children is not supported by the Form component.

[Lukas742]

Hi @reqyou

good news, from v1.17.0 on we support custom components as children.

--> codeSandbox

[reqyou]

Love this!!!

Two ideas:

• I would like to set direction of FormItem, to be able to decide whether my label is shown column or row wise
• Button should have form attribute to be able to submit a form by unique id from "outside", in case my submit button is not the nearest submit button to the form (currently we need to submit those forms manually the imperative way)

[Lukas742]

If I understand what you want to achieve correctly, then this behavior should already be possible.

• You can control the position and size of your label by setting the labelSpanXYZ prop. If you want it to take up a whole row, then you can set it to 12.

• For submitting via button (or Enter) only, you need to set the Button component to the respective type and nest it and the Form component inside a custom form tag. Since by default, there would be two nested forms which is not supported, you need to set the as prop to a "div" for example.

--> codeSandbox

[reqyou]

Until now .. I misunderstood the labelSpan props. Thanks for that!! 💛

About the second I adjusted the codesandbox to point out what I mean --> codesandbox

[Lukas742]

About the second I adjusted the codesandbox to point out what I mean --> codesandbox

This sounds like a legitimate feature request to me. Since theButton component is a web component developed by the UI5 web component team, feel free to open a feature request in their repo and ask for the form attribute to be provided.