fix(FormFiled): pass id when contains child elements or has content prop (#3901)

* Fixed an issue where id was not set for FormField when content or child elements were provided

* Update src/collections/Form/FormField.js

* Update src/collections/Form/FormField.js

* Update src/collections/Form/FormField.js

Co-authored-by: srotbart <srotbart@ebay.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Author: 3 people

src/collections/Form/FormField.js

@@ -78,14 +78,14 @@ function FormField(props) {
   if (_.isNil(control)) {
     if (_.isNil(label)) {
       return (
-        <ElementType {...rest} className={classes}>
+        <ElementType {...rest} className={classes} id={id}>
           {childrenUtils.isNil(children) ? content : children}
         </ElementType>
       )
     }
 
     return (
-      <ElementType {...rest} className={classes}>
+      <ElementType {...rest} className={classes} id={id}>
         {errorLabelBefore}
         {createHTMLLabel(label, { autoGenerateKey: false })}
         {errorLabelAfter}

test/specs/collections/Form/FormField-test.js

@@ -198,4 +198,21 @@ describe('FormField', () => {
       button.should.have.prop('content', 'Click Me')
     })
   })
+
+  describe('id', () => {
+    it('is set when content is provided', () => {
+      const wrapper = mount(<FormField content='content' id='testId' />)
+      const fieldId = wrapper.getDOMNode().getAttribute('id')
+      expect(fieldId).to.equal('testId')
+    })
+    it('is set when have child elements', () => {
+      const wrapper = mount(
+        <FormField id='testId'>
+          <input />
+        </FormField>,
+      )
+      const fieldId = wrapper.getDOMNode().getAttribute('id')
+      expect(fieldId).to.equal('testId')
+    })
+  })
 })