mi6 / mi6/ic-ui-kit

Internal issue 3144 - Radio groups created by loops can affect each other

Open
#4,165 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

good first issue
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.