fix(FormItem): allow ids on children (#4412)

It's sometimes necessary to set the `id` on controls yourself, e.g. when
displaying a popover.

Author: Lukas742

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

@@ -24,7 +24,7 @@ const component = (
         <Input data-testid="formInput2" type={InputType.Text} />
       </FormItem>
       <FormItem label={<Label>item 4</Label>}>
-        <Input type={InputType.Number} />
+        <Input type={InputType.Number} id="test-id" />
       </FormItem>
     </FormGroup>
   </Form>
@@ -81,6 +81,10 @@ describe('Form', () => {
     // custom `Label`
     cy.findAllByText(`item 4`).eq(0).should('be.visible');
     cy.findAllByText(`item 4`).eq(1).should('exist').should('not.be.visible');
+
+    // custom id child of FormItem
+    cy.get('#test-id').should('have.length', 1).should('be.visible');
+    cy.get('[for="test-id"]').should('have.length', 1).should('not.be.visible');
   });
 
   it('FilterItem: doesnt crash with portal as child', () => {

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

@@ -156,11 +156,12 @@ const FormItem = (props: FormItemPropTypes) => {
           // @ts-expect-error: type can't be string because of `isValidElement`
           if (isValidElement(child) && child.type && child.type.$$typeof !== Symbol.for('react.portal')) {
             const content = getContentForHtmlLabel(label);
+            const childId = child?.props?.id;
             return (
               <Fragment key={`${content}-${uniqueId}`}>
                 {/*@ts-expect-error: child is ReactElement*/}
-                {cloneElement(child, { id: `${uniqueId}-${index}` })}
-                <label htmlFor={`${uniqueId}-${index}`} style={{ display: 'none' }} aria-hidden={true}>
+                {cloneElement(child, { id: childId ?? `${uniqueId}-${index}` })}
+                <label htmlFor={childId ?? `${uniqueId}-${index}`} style={{ display: 'none' }} aria-hidden={true}>
                   {content}
                 </label>
               </Fragment>