Repository metrics
- Stars
- (1,387 stars)
- PR merge metrics
- (30d に merged PR はありません)
説明
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