BusyIndicator breaks styles for Form component #6579

RomanKarpiak · 2024-10-31T14:14:15Z

RomanKarpiak
Oct 31, 2024

Hello,
we are working on migration from V1 to V2 and I noticed strange behavior, when I have Form component within BusyIndicator component Form styles are broken.
For instance:
<BusyIndicator> <Form headerText="Test Form" labelSpan="S6 M6 L6 XL6" layout="S2 M2 L2 XL2" > <FormGroup headerText="Personal Data"> <FormItem labelContent={<Label>Name</Label>}> <Input type="Text" /> </FormItem> <FormItem labelContent={<Label>Address</Label>}> <Input type="Text" /> </FormItem> <FormItem labelContent={<Label>Country</Label>}> <Select> <Option>Germany</Option> <Option>France</Option> <Option>Italy</Option> </Select> </FormItem> <FormItem className="formAlignLabelStart" labelContent={<Label>Additional Comment</Label>} > <TextArea placeholder="TEXT" rows={5} /> </FormItem> <FormItem labelContent={<Label>Home address</Label>}> <CheckBox checked /> </FormItem> </FormGroup> <FormGroup headerText="Company Data"> <FormItem labelContent={<Label>Company Name</Label>}> <Input type="Text" /> </FormItem> <FormItem labelContent={<Label>Company Address</Label>}> <Input type="Text" /> </FormItem> <FormItem labelContent={<Label>Company City</Label>}> <Input type="Text" /> </FormItem> <FormItem labelContent={<Label>Company Country</Label>}> <Input type="Text" /> </FormItem> <FormItem labelContent={<Label>Number of Employees</Label>}> <Input disabled type="Number" value="5000" /> </FormItem> <FormItem labelContent={<Label>Member of Partner Network</Label>}> <CheckBox checked /> </FormItem> </FormGroup> <FormGroup headerText="Marketing Data"> <FormItem labelContent={<Label>Email</Label>}> <Input type="Email" /> </FormItem> <FormItem labelContent={<Label>Company Email</Label>}> <Input type="Email" /> </FormItem> <FormItem labelContent={<Label>I want to receive the newsletter</Label>} > <CheckBox /> </FormItem> </FormGroup> </Form> </BusyIndicator>

Form styles work only if add them explicitly..
Our dependencies:
"@ui5/webcomponents-react": "^2.2.0",
"react": "^18.2.0",

Here is an example:
https://stackblitz.com/edit/github-m52y88-9gz17r?file=src%2FApp.tsx

When I remove BusyIndicator then styles work properly.. Could you help us with this issue?
Thanks in advance