From 2e4439c9f4b8857f4cc7695800cfb962f1aa2ce9 Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Thu, 28 May 2026 11:41:27 -0500
Subject: [PATCH] Remove ID collisions on repeated menu names

Add React `useId()` method, safely stripped of invalid characters for use in CSS/HTML, to make each trigger/menu unique to avoid collisions.
---
 client/components/dropdown/dropdown.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/client/components/dropdown/dropdown.jsx b/client/components/dropdown/dropdown.jsx
index 892b5b199..283ed3172 100644
--- a/client/components/dropdown/dropdown.jsx
+++ b/client/components/dropdown/dropdown.jsx
@@ -17,14 +17,16 @@
  */
 
 import './dropdown.less';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useId, useRef } from 'react';
 import _ from 'lodash';
 
 // use react context to keep track of the menu depth (menus in menus)
 const MenuDepthContext = React.createContext(0);
 
 const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, ...props })=>{
-	const menuId = `${_.kebabCase(groupName)}-menu`;
+	const reactId = useId();
+	const safeId = reactId.replace(/[^a-zA-Z0-9_-]/g, '');
+	const menuId = `${_.kebabCase(groupName)}-${safeId}-menu`;
 	const anchorName = `--${menuId}`;
 	const depth = React.useContext(MenuDepthContext);
 
@@ -93,7 +95,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
 	return (
 		<div className={['menu-wrapper', className].join(' ')} role='none' >
 			<button
-				id={groupName.replace(' ', '-')}
+				id={`${menuId}-trigger`}
 				className={['menu-item', color].join(' ')}
 				popoverTarget={menuId}
 				icon={icon}