fix(data-table): input name is stable while id is unique

This commit is contained in:
Eric Liu 2025-01-19 17:16:24 -08:00
commit cf6fc1f4f1
2 changed files with 11 additions and 2 deletions

View file

@ -381,6 +381,8 @@
<InlineCheckbox <InlineCheckbox
bind:ref={refSelectAll} bind:ref={refSelectAll}
aria-label="Select all rows" aria-label="Select all rows"
name="{id}-select-all}"
value="all"
checked={selectAll} checked={selectAll}
{indeterminate} {indeterminate}
on:change={(e) => { on:change={(e) => {
@ -512,9 +514,12 @@
class:bx--table-column-radio={radio} class:bx--table-column-radio={radio}
> >
{#if !nonSelectableRowIds.includes(row.id)} {#if !nonSelectableRowIds.includes(row.id)}
{@const inputId = `${id}-${row.id}`}
{@const inputName = `${id}-name`}
{#if radio} {#if radio}
<RadioButton <RadioButton
name="{id}-{row.id}" id={inputId}
name={inputName}
checked={selectedRowIds.includes(row.id)} checked={selectedRowIds.includes(row.id)}
on:change={() => { on:change={() => {
selectedRowIds = [row.id]; selectedRowIds = [row.id];
@ -523,7 +528,8 @@
/> />
{:else} {:else}
<InlineCheckbox <InlineCheckbox
name="{id}-{row.id}" id={inputId}
name={inputName}
checked={selectedRowIds.includes(row.id)} checked={selectedRowIds.includes(row.id)}
on:change={() => { on:change={() => {
if (selectedRowIds.includes(row.id)) { if (selectedRowIds.includes(row.id)) {

View file

@ -14,3 +14,6 @@
<DataTable radio {headers} {rows} /> <DataTable radio {headers} {rows} />
<DataTable radio {headers} {rows} /> <DataTable radio {headers} {rows} />
<DataTable batchSelection selectable {headers} {rows} />
<DataTable batchSelection selectable {headers} {rows} />