Internal issue 3144 - Radio groups created by loops can affect each other
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
h3. Summary of the bug
When creating radio groups via a loop (e.g. mapping over an array), if the label of the radio group/options is the same, clicking on the _text_ of any option outside the first group will also change the value of the first group. This does not happen when clicking the buttons themselves or when each group/option is given unique labels.
h3. 🪜 How to reproduce
- Create radio groups with the same labels via a loop.
- Click on the text of any group other than the first.
- First group will change with the one being clicked.
h3. 📸 Screenshots or code
[StackBlitz|https://stackblitz.com/edit/n2dgwg6r?file=src%2Fapp.tsx] (see attachments for demonstration)
Code (commented sections stop the problem occurring):
```export default function App() {
const [array, setArray] = useState<{ value: string }[]>([
{ value: "none" },
{ value: "none" },
{ value: "none" },
]);
const handleSelect = (value: string, index: number) =>
setArray((arr) => {
arr[index].value = value;
return arr;
});
return (
<>
{array.map((object, index) => {
return (
handleSelect(ev.detail.value, index)}
/>
handleSelect(ev.detail.value, index)}
/>
);
})}
);
}
```
h3. 🖥 📱 Device
* Type: Laptop/Desktop
* Device: MacBook/Linux PC
* OS version: macOS26.2/?
* Browser version: Chrome 143/Chrome 130
h3. 🧐 Expected behaviour
Clicking on the text of a radio option should only select that option.
h3. 📝 Acceptance Criteria
_Given_ a set of radio groups created via a loop,
_When_ clicking on an option in the radio groups
_Then_ no other option is selected
h3. 🚨 Urgency (low, medium or high)
Low
h3. Additional info
None
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduction in src/app.tsx from the linked StackBlitz, focusing on how IcRadioGroup and IcRadioOption handle repeated labels when rendered in a loop. Reproduce the text-click behavior, then trace the component implementation and add coverage for the acceptance criteria: selecting an option must not select an option in another group.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100