f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-08-06 06:47:38 +00:00
Code Wiki Activity

Remove ID collisions on repeated menu names

Browse Source 
Add React `useId()` method, safely stripped of invalid characters for use in CSS/HTML, to make each trigger/menu unique to avoid collisions.
This commit is contained in:
Gazook89
2026-05-28 11:41:27 -05:00
parent 5e122626d4
commit 2e4439c9f4
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/components/dropdown/dropdown.jsx
+5 -3
View File
@@ -17,14 +17,16 @@
*/ */
import './dropdown.less'; import './dropdown.less';
import React, { useEffect, useRef } from 'react'; import React, { useEffect, useId, useRef } from 'react';
import _ from 'lodash'; import _ from 'lodash';
// use react context to keep track of the menu depth (menus in menus) // use react context to keep track of the menu depth (menus in menus)
const MenuDepthContext = React.createContext(0); const MenuDepthContext = React.createContext(0);
const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, ...props })=>{ 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 anchorName = `--${menuId}`;
const depth = React.useContext(MenuDepthContext); const depth = React.useContext(MenuDepthContext);
@@ -93,7 +95,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
return ( return (
<div className={['menu-wrapper', className].join(' ')} role='none' > <div className={['menu-wrapper', className].join(' ')} role='none' >
<button <button
id={groupName.replace(' ', '-')} id={`${menuId}-trigger`}
className={['menu-item', color].join(' ')} className={['menu-item', color].join(' ')}
popoverTarget={menuId} popoverTarget={menuId}
icon={icon} icon={icon}