fix: prevent id conflicts when rendering multiple ListEntries components

bluecatengineering · Feb 3, 2025 · ae73ce2 · ae73ce2
1 parent 3466a75
commit ae73ce2
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/packages/pelagos/__tests__/listInput/ListEntries-test.js b/packages/pelagos/__tests__/listInput/ListEntries-test.js
@@ -6,12 +6,15 @@ import ListEntries from '../../src/listInput/ListEntries';
 import renderListItem from '../../src/listItems/renderListItem';
 import scrollIntoView from '../../src/functions/scrollIntoView';
 import moveListItem from '../../src/functions/moveListItem';
+import useRandomId from '../../src/hooks/useRandomId';
 import useReorder from '../../src/hooks/useReorder';
 
 jest.unmock('../../src/listInput/ListEntries');
 
 jest.mock('lodash-es/debounce', () => jest.fn((f) => ((f.cancel = jest.fn()), f)));
 
+useRandomId.mockReturnValue('random-id');
+
 const anyFunction = expect.any(Function);
 
 const list = [

diff --git a/packages/pelagos/__tests__/listInput/__snapshots__/ListEntries-test.js.snap b/packages/pelagos/__tests__/listInput/__snapshots__/ListEntries-test.js.snap
@@ -8,7 +8,7 @@ exports[`ListEntries rendering renders expected elements 1`] = `
   />
   <ul
     className="ListEntries ListEntries--grid TestClass"
-    id="test"
+    id="random-id"
     onClick={[Function]}
   >
     <Layer
@@ -44,7 +44,7 @@ exports[`ListEntries rendering renders expected elements when column is set 1`]
   />
   <ul
     className="ListEntries ListEntries--column"
-    id="test"
+    id="random-id"
     onClick={[Function]}
   >
     <Layer
@@ -80,7 +80,7 @@ exports[`ListEntries rendering renders expected elements when highlightKey is se
   />
   <ul
     className="ListEntries ListEntries--grid"
-    id="test"
+    id="random-id"
     onClick={[Function]}
   >
     <Layer
@@ -116,7 +116,7 @@ exports[`ListEntries rendering renders expected elements when renderItem is not
   />
   <ul
     className="ListEntries ListEntries--grid"
-    id="test"
+    id="random-id"
     onClick={[Function]}
   >
     <Layer
@@ -152,17 +152,17 @@ exports[`ListEntries rendering renders expected elements when reorderable is set
   />
   <div
     className="sr-only"
-    id="test-operation"
+    id="random-id-operation"
   >
     Press space bar to reorder
   </div>
   <ul
     className="ListEntries ListEntries--column"
-    id="test"
+    id="random-id"
     onClick={[Function]}
   >
     <Layer
-      aria-describedby="test-operation"
+      aria-describedby="random-id-operation"
       as="li"
       className="ListEntries__item"
       data-index={0}
@@ -203,7 +203,7 @@ exports[`ListEntries rendering renders expected elements when the item has class
   />
   <ul
     className="ListEntries ListEntries--grid"
-    id="test"
+    id="random-id"
     onClick={[Function]}
   >
     <Layer

diff --git a/packages/pelagos/src/listInput/ListEntries.js b/packages/pelagos/src/listInput/ListEntries.js
@@ -8,6 +8,7 @@ import {cloneElement, useCallback, useEffect, useMemo} from 'react';
 import Layer from '../components/Layer';
 import moveListItem from '../functions/moveListItem';
 import scrollIntoView from '../functions/scrollIntoView';
+import useRandomId from '../hooks/useRandomId';
 import useReorder from '../hooks/useReorder';
 import renderListItem from '../listItems/renderListItem';
 
@@ -68,6 +69,7 @@ const ListEntries = ({
 		return clearHighlight && clearHighlight.cancel;
 	}, [highlightKey, clearHighlight]);
 
+	id = useRandomId(id);
 	const operationId = `${id}-operation`;
 	return (
 		<>