From cf6fc1f4f149864b078b51c29b9dc28e09723644 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 19 Jan 2025 17:16:24 -0800
Subject: [PATCH] fix(data-table): input `name` is stable while `id` is unique

---
 src/DataTable/DataTable.svelte                  | 10 ++++++++--
 tests/DataTable/DuplicateDataTables.test.svelte |  3 +++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 0519aaa8..29586adf 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -381,6 +381,8 @@
             <InlineCheckbox
               bind:ref={refSelectAll}
               aria-label="Select all rows"
+              name="{id}-select-all}"
+              value="all"
               checked={selectAll}
               {indeterminate}
               on:change={(e) => {
@@ -512,9 +514,12 @@
               class:bx--table-column-radio={radio}
             >
               {#if !nonSelectableRowIds.includes(row.id)}
+                {@const inputId = `${id}-${row.id}`}
+                {@const inputName = `${id}-name`}
                 {#if radio}
                   <RadioButton
-                    name="{id}-{row.id}"
+                    id={inputId}
+                    name={inputName}
                     checked={selectedRowIds.includes(row.id)}
                     on:change={() => {
                       selectedRowIds = [row.id];
@@ -523,7 +528,8 @@
                   />
                 {:else}
                   <InlineCheckbox
-                    name="{id}-{row.id}"
+                    id={inputId}
+                    name={inputName}
                     checked={selectedRowIds.includes(row.id)}
                     on:change={() => {
                       if (selectedRowIds.includes(row.id)) {
diff --git a/tests/DataTable/DuplicateDataTables.test.svelte b/tests/DataTable/DuplicateDataTables.test.svelte
index 3692ef0e..91756b80 100644
--- a/tests/DataTable/DuplicateDataTables.test.svelte
+++ b/tests/DataTable/DuplicateDataTables.test.svelte
@@ -14,3 +14,6 @@
 
 <DataTable radio {headers} {rows} />
 <DataTable radio {headers} {rows} />
+
+<DataTable batchSelection selectable {headers} {rows} />
+<DataTable batchSelection selectable {headers} {rows} />