Selecting a row on one DataTable unchecks radio button on another DataTable

[bhavers]

Problem:

• Selecting a row in one DataTable will result in unselecting the radio button of a row with the same id of another DataTable on the same page.

Situation:

• Two DataTables on the same page.
• DataTables using radio buttons for selection.
• Both DataTables use the same id property for the rows.

Reproduce issue:

• Example on: https://svelte.dev/playground/b1b4a7ad80bb4885a74622c9029f40fe?version=5.16.5
• Select first row on first DataTable (id abc123), than select first row on second DataTable (id abc123).
• Notice radio button being unchecked in the first DataTable.

Analysis
See analysis of @theetrain on Discord.

It appears that when radio={true} on the DataTable, the name attribute is set as the row's ID. I think the radio prop ought to accept a string as the desired name, and then its value attribute would be the Row's ID.
In other words, a row with an id abc123 should have a radio input like this:
<input type="radio" name="table-1-row" value="abc123" />
Link to code:

carbon-components-svelte/src/DataTable/DataTable.svelte

Line 502 in f3a8d99

name="select-row-{row.id}"

Workaround:

• use different id's for DataTables.

[metonym]

Nice catch – thanks for the detailed repro.

I've a fix in #2082

[metonym]

Fixed in v0.87.1