fix(data-table): prefix internal ID for radio button, checkbox (#2082)

Fixes #2081

Author: metonym

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];
 
@@ -370,6 +374,8 @@
             <InlineCheckbox
               bind:ref={refSelectAll}
               aria-label="Select all rows"
+              name="{id}-select-all"
+              value="all"
               checked={selectAll}
               {indeterminate}
               on:change={(e) => {
@@ -497,9 +503,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="select-row-{row.id}"
+                    id={inputId}
+                    name={inputName}
                     checked={selectedRowIds.includes(row.id)}
                     on:change={() => {
                       selectedRowIds = [row.id];
@@ -508,7 +517,8 @@
                   />
                 {:else}
                   <InlineCheckbox
-                    name="select-row-{row.id}"
+                    id={inputId}
+                    name={inputName}
                     checked={selectedRowIds.includes(row.id)}
                     on:change={() => {
                       if (selectedRowIds.includes(row.id)) {

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",

tests/DataTable/DuplicateDataTables.test.svelte

@@ -0,0 +1,19 @@
+<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: "1", contact: { company: "Company 1" } },
+    { id: "2", contact: { company: "Company 2" } },
+  ];
+</script>
+
+<DataTable radio {headers} {rows} />
+<DataTable radio {headers} {rows} />
+
+<DataTable batchSelection selectable {headers} {rows} />
+<DataTable batchSelection selectable {headers} {rows} />