react-materialize/react-materialize

Radio input id's are duplicated

Open

#989 opened on 2020年1月13日

GitHub で見る
 (2 comments) (0 reactions) (0 assignees)JavaScript (1,387 stars) (317 forks)batch import
buggood first issuehelp wanted

説明

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

  1. 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>
  1. Select an option for first radio group
  2. 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

コントリビューターガイド