Repository: Semantic-Org/Semantic-UI-React (JavaScript)

Issue:
Form.Field - Cannot set ID when contains child elements or content prop
## Bug Report
When creating a `<Form.Field>` with child elements or content prop, ID is ignored and cannot be set on the div that is created from the `<Form.Field>`.

This bug is caused by the following PR: https://github.com/Semantic-Org/Semantic-UI-React/pull/3822
Since the PR added `id` prop as one of the handled props for this component if it is provided by the user it will be filtered out on the `getUnhandledProps` function.

When no control is provided the created element props will be taken from the `rest` variable.
Because the `id` was filtered out from the `rest` variable it will not be passed to the child elements or the content that was set.

Let me know if you agree that this is a bug and I can open a PR for the fix and review

### Steps
Create a form and add <Form.Field>:
```
<Form>
    <Form.Field id="testId" content="Some content"/>
 </Form>
```

### Expected Result
```
<form class="ui form">
    <div id="testId" class="field">Some content</div>
</form>
```

### Actual Result
```
<form class="ui form">
    <div class="field">Some content</div>
</form>
```

### Version
0.88.2

### Testcase
https://codesandbox.io/s/semantic-ui-react-9gnsc


Discussion:
👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

Hi, I seemed to have found the solution, may I work on this issue?
@mattberg88 I've opened PR https://github.com/Semantic-Org/Semantic-UI-React/pull/3901 for the fix 



Patch:
diff --git a/src/collections/Form/FormField.js b/src/collections/Form/FormField.js
index 0ee340a428..43e0097369 100644
--- a/src/collections/Form/FormField.js
+++ b/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 patch:
diff --git a/test/specs/collections/Form/FormField-test.js b/test/specs/collections/Form/FormField-test.js
index c7411e65f4..017414f4fe 100644
--- a/test/specs/collections/Form/FormField-test.js
+++ b/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')
+    })
+  })
 })