don't crash with only one child

Author: MarcusNotheis

packages/main/src/components/Form/Form.stories.mdx

@@ -76,4 +76,9 @@ import { Form } from '@ui5/webcomponents-react/lib/Form';
   </Story>
 </Preview>
 
+### Usage Notes
+
+Please note that the `FormGroup` and `FormItem` components are only used for calculating the final layout of the `Form`,
+thus they don't accept any other props then the specified ones, especially no `className`, `style` or `ref`.
+
 <Props components={{ Form, FormGroup, FormItem }} />

packages/main/src/components/Form/Form.test.tsx

@@ -58,21 +58,6 @@ describe('Create a Form', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
-  test('should create a FormGroup and put ungrouped FormItems into it', () => {
-    const ungroupedChildren = (
-      <Form title={'Test form'}>
-        <FormItem label={'item 1'}>
-          <Input type={InputType.Text} />
-        </FormItem>
-        <FormItem label={'item 2'}>
-          <Input type={InputType.Number} />
-        </FormItem>
-      </Form>
-    );
-    const wrapper = mount(ungroupedChildren);
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-
   test("should use a single FormGroup's title as a Form title if one is not set", () => {
     const ungroupedChildren = (
       <Form>

packages/main/src/components/Form/__snapshots__/Form.test.tsx.snap

@@ -1,55 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Create a Form should create a FormGroup and put ungrouped FormItems into it 1`] = `
-<div
-  class="Form-form-0"
-  style="grid-template-columns: repeat(24, 1fr); --ui5wcr_form_full_span: span 24; --ui5wcr_form_content_span: 8; --ui5wcr_form_label_span: 4;"
->
-  <ui5-title
-    class="Form-formTitle-0"
-    level="H3"
-  >
-    Test form
-  </ui5-title>
-  <ui5-title
-    level="H5"
-    style="padding-bottom: 0.75rem; grid-column: span 12;"
-  />
-  <ui5-title
-    level="H5"
-    style="padding-bottom: 0.75rem; grid-column: span 12;"
-  />
-  <ui5-label
-    class="FormItem-label-0"
-    style="grid-column-start: 1;"
-  >
-    item 1:
-  </ui5-label>
-  <div
-    class="FormItem-content-0"
-  >
-    <ui5-input
-      type="Text"
-      value-state="None"
-    />
-  </div>
-  <ui5-label
-    class="FormItem-label-0"
-    style="grid-column-start: 13;"
-  >
-    item 2:
-  </ui5-label>
-  <div
-    class="FormItem-content-0"
-  >
-    <ui5-input
-      type="Number"
-      value-state="None"
-    />
-  </div>
-</div>
-`;
-
 exports[`Create a Form should use a single FormGroup's title as a Form title if one is not set 1`] = `
 <div
   class="Form-form-0"

packages/main/src/components/Form/index.tsx

@@ -58,6 +58,8 @@ const Form: FC<FormPropTypes> = forwardRef((props: FormPropTypes, ref: Ref<HTMLD
     for (let i = 0; i < firstColumnFormGroups.length; i++) {
       const formGroupColumnOne = firstColumnFormGroups[i];
       const formGroupColumnTwo = secondColumnFormGroups[i];
+      let childrenOfColumnOneGroup = [];
+      let childrenOfColumnTwoGroup = [];
 
       if (formGroupColumnOne) {
         formGroups.push(
@@ -69,6 +71,10 @@ const Form: FC<FormPropTypes> = forwardRef((props: FormPropTypes, ref: Ref<HTMLD
             {formGroupColumnOne?.props?.title ?? ''}
           </Title>
         );
+        childrenOfColumnOneGroup =
+          formGroupColumnOne.type.displayName === 'FormItem'
+            ? [formGroupColumnOne]
+            : Children.toArray(formGroupColumnOne?.props?.children);
         totalRowCount++;
       }
 
@@ -82,17 +88,12 @@ const Form: FC<FormPropTypes> = forwardRef((props: FormPropTypes, ref: Ref<HTMLD
             {formGroupColumnTwo?.props?.title ?? ''}
           </Title>
         );
+        childrenOfColumnTwoGroup =
+          formGroupColumnTwo.type.displayName === 'FormItem'
+            ? [formGroupColumnTwo]
+            : Children.toArray(formGroupColumnTwo?.props?.children);
       }
 
-      const childrenOfColumnOneGroup =
-        formGroupColumnOne.type.displayName === 'FormItem'
-          ? [formGroupColumnOne]
-          : Children.toArray(formGroupColumnOne?.props?.children);
-      const childrenOfColumnTwoGroup =
-        formGroupColumnTwo.type.displayName === 'FormItem'
-          ? [formGroupColumnTwo]
-          : Children.toArray(formGroupColumnTwo?.props?.children);
-
       const maxChildCount = Math.max(childrenOfColumnOneGroup.length, childrenOfColumnTwoGroup.length);
 
       for (let childIndex = 0; childIndex < maxChildCount; childIndex++) {