From 4bdf29d7a82b3d606af89e79fa9c4bed80e953df Mon Sep 17 00:00:00 2001
From: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
Date: Wed, 24 Jul 2024 16:59:56 -0300
Subject: [PATCH] Added unique id to `name` in `TableSelectRow`  (#17015)

* fix: added unique id to name to fix error with multiple datatables

* fix: updated snapshot

* fix: removed test story

---------

Co-authored-by: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>
Co-authored-by: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com>
---
 .../src/components/DataTable/TableSelectRow.tsx      |  5 +++--
 .../__tests__/__snapshots__/DataTable-test.js.snap   | 12 ++++++------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/components/DataTable/TableSelectRow.tsx b/packages/react/src/components/DataTable/TableSelectRow.tsx
index d6c0d4e6124e..9ca071127c9d 100644
--- a/packages/react/src/components/DataTable/TableSelectRow.tsx
+++ b/packages/react/src/components/DataTable/TableSelectRow.tsx
@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useId } from 'react';
 import classNames from 'classnames';
 import InlineCheckbox from '../InlineCheckbox';
 import RadioButton from '../RadioButton';
@@ -85,9 +85,10 @@ const TableSelectRow = ({
   className,
 }: TableSelectRowProps) => {
   const prefix = usePrefix();
+  const uniqueNameId = useId();
   const selectionInputProps = {
     id,
-    name,
+    name: name ? name : uniqueNameId,
     onClick: onSelect,
     onChange,
     checked,
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
index 609e44a2565f..a1d522091f58 100644
--- a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
+++ b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -10,20 +10,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r63:-title"
+        id="tc-:r71:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r63:-description"
+        id="tc-:r71:-description"
       />
     </div>
     <div
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r63:-title"
+        aria-labelledby="tc-:r71:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -182,20 +182,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r5t:-title"
+        id="tc-:r6o:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r5t:-description"
+        id="tc-:r6o:-description"
       />
     </div>
     <div
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r5t:-title"
+        aria-labelledby="tc-:r6o:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>