Semantic-ui-react: Checkbox label not rendered if using a component

[dfilipidisz]

Bug Report

Steps

// FormattedMessage is from react-intl and renders as <span>dummy</span>
<Checkbox label={<FormattedMessage defaultMessage="dummy" />} />

When used this way, the label DOM node will be completely replaced by the supplied component (in this case a span) and the checkbox will not be usable.

Expected Result

React:
<Checkbox label={<span>test</span>} />
DOM:

<div class="ui checkbox">
  <input type="checkbox" class="hidden" readonly="" tabindex="0" value="on">
  <label><span>test</span></label>
</div>

Actual Result

React:
<Checkbox label={<span>test</span>} />
DOM:

<div class="ui checkbox">
  <input type="checkbox" class="hidden" readonly="" tabindex="0" value="on">
  <span>test</span>
</div>

Version

0.81.1

Testcase

https://codesandbox.io/s/1336kzlyw3

[layershifter]

Ir's an expected result, you need to use:

Checkbox label={{ children: <span>test</span>}} />

<div class="ui checkbox">
  <input type="checkbox" class="hidden" readonly="" tabindex="0" />
  <label><span>test</span></label>
</div>