When supplying a label to a FormField children do not render

reduxdj commented 4 years ago

Bug Report

Noticed this, and it baffled me a bit

Steps

        <Form.Field tabIndex={4} label="some label" error={formit.errors.dob}>
          <input />
        </Form.Field>

Expected Result

The result that you expected.

Some Label Input Box

Actual Result

Some Label

Version

.88.2

Testcase

[Fork, update, and replace this pen to show the bug]: https://codesandbox.io/s/2l3n74j9y

calebdeji commented 4 years ago

Would like to work on this, is this open?

brianespinosa commented 4 years ago

Please create a reproducible test case using the supplied Codesandbox link at the bottom of the bug report template.

Closing this report until a reproducible case is provided.

layershifter commented 4 years ago

This is expected behavior you should use Children or Shorthand API. I suggest to use Form.Input in this case, all scenarios should be possible with it.

I created CodeSandbox (https://codesandbox.io/s/kind-sun-7zfgn?file=/example.js), but it has weird errors, however in local delevopment the warning is fully visible:

Warning: Failed prop type: Prop `label` in `FormField` conflicts with props: `children`. They cannot be defined together, choose one or the other.

This also is mentioned in our docs:

  // Heads Up!
  // Do not disallow children with `label` shorthand
  // The `control` might accept a `label` prop and `children`
  /** Mutually exclusive with children. */

Semantic-Org / Semantic-UI-React