説明
Description
If more than one radio groups are found in the same DOM, the same ID's are assigned to its options, preventing the correct handling of events.
Steps to Reproduce
- Render two RadioGroup
<Fragment>
<RadioGroup
onChange={this.handleFirstChange}
options={[
{ label: 'No', value: 0 },
{ label: 'Yes', value: 1 }
]}
/>
<RadioGroup
onChange={this.handleSecondChange}
options={[
{ label: 'Other No', value: 3 },
{ label: 'Other Yes', value: 4 }
]}
/>
</Fragment>
- Select an option for first radio group
- Select an option for second radio group
Expected behavior: The onChange function given to the Select is triggered and the component's value is updated.
Actual behavior: For the first radiogroup, it's options get the following id's: #radio0 and #radio1. For the second , it's options are assigned the same id's: #radio0 and #radio1.
Because of DOM precedence, the first incidence of #radio0 is found and its event (handleFirstChange) is triggered, instead of (handleSecondChange).
More information: react-materialize radio group doesn't receive a parameter for custom id. When creating the component, it maps its options and uses the index as the id. Every time the constructor builds a new instance, it starts on 0.
return _react.default.createElement(_react.default.Fragment, null, options.map(function (radioItem, idx) {
return _react.default.createElement("label", {
htmlFor: "radio".concat(radioItem.name).concat(idx),
key: "radio".concat(idx)
}, _react.default.createElement("input", {
id: "radio".concat(radioItem.name).concat(idx),
}
Versions
react-materialize: 3.4.1 materialize-css: 1.0.0 react: 16.10.2