Added unique id to name in TableSelectRow (carbon-design-system#1…

…7015) * fix: added unique id to name to fix error with multiple datatables * fix: updated snapshot * fix: removed test story --------- Co-authored-by: Riddhi Bansal <[email protected]> Co-authored-by: Nikhil Tomar <[email protected]>
2nikhiltom · Jul 24, 2024 · 4bdf29d · 4bdf29d
1 parent b47b7a7
commit 4bdf29d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git 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
@@ -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>