From 53ebf7874383d1ec1569c91826d27dc3614b8d51 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 7 Jan 2025 16:36:30 -0800
Subject: [PATCH] fix(data-table): prefix internal ID for radio button,
 checkbox

Fixes #2081
---
 src/DataTable/DataTable.svelte                  |  8 ++++++--
 tests/App.test.svelte                           |  6 ++++++
 tests/DataTable/DuplicateDataTables.test.svelte | 16 ++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 tests/DataTable/DuplicateDataTables.test.svelte

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 0d27e08d4b..c985a02784 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -170,6 +170,10 @@
   const batchSelectedIds = writable(false);
   const tableRows = writable(rows);
 
+  // Internal ID prefix for radio buttons, checkboxes, etc.
+  // since there may be multiple `DataTable` instances that have overlapping row ids.
+  const id = "ccs-" + Math.random().toString(36);
+
   // Store a copy of the original rows for filter restoration.
   $: originalRows = [...rows];
 
@@ -499,7 +503,7 @@
               {#if !nonSelectableRowIds.includes(row.id)}
                 {#if radio}
                   <RadioButton
-                    name="select-row-{row.id}"
+                    name="{id}-{row.id}"
                     checked={selectedRowIds.includes(row.id)}
                     on:change={() => {
                       selectedRowIds = [row.id];
@@ -508,7 +512,7 @@
                   />
                 {:else}
                   <InlineCheckbox
-                    name="select-row-{row.id}"
+                    name="{id}-{row.id}"
                     checked={selectedRowIds.includes(row.id)}
                     on:change={() => {
                       if (selectedRowIds.includes(row.id)) {
diff --git a/tests/App.test.svelte b/tests/App.test.svelte
index 0e1066e568..525454e545 100644
--- a/tests/App.test.svelte
+++ b/tests/App.test.svelte
@@ -4,6 +4,7 @@
   import Accordion from "./Accordion/Accordion.test.svelte";
   import AccordionProgrammatic from "./Accordion/Accordion.programmatic.test.svelte";
   import AccordionDisabled from "./Accordion/Accordion.disabled.test.svelte";
+  import DuplicateDataTables from "./DataTable/DuplicateDataTables.test.svelte";
   import TreeView from "./TreeView/TreeView.test.svelte";
   import TreeViewHierarchy from "./TreeView/TreeView.hierarchy.test.svelte";
   import RecursiveList from "./RecursiveList/RecursiveList.test.svelte";
@@ -32,6 +33,11 @@
       name: "AccordionDisabled",
       component: AccordionDisabled,
     },
+    {
+      path: "/data-table",
+      name: "DataTable",
+      component: DuplicateDataTables,
+    },
     {
       path: "/recursive-list",
       name: "RecursiveList",
diff --git a/tests/DataTable/DuplicateDataTables.test.svelte b/tests/DataTable/DuplicateDataTables.test.svelte
new file mode 100644
index 0000000000..06d8ff8aad
--- /dev/null
+++ b/tests/DataTable/DuplicateDataTables.test.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { DataTable } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "id", value: "id" },
+    { key: "contact.company", value: "Company name" },
+  ] as const;
+
+  const rows = [
+    { id: "abc123", contact: { company: "Super Wheels" } },
+    { id: "321baf", contact: { company: "Mini Wheels" } },
+  ];
+</script>
+
+<DataTable radio {headers} {rows} />
+<DataTable radio {headers} {rows} />