0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-08-06 06:47:38 +00:00

menu items dismiss menu on click by default

Unless a menu item has the `no-dismiss` attribute (set to either `''` or `'true'`), clicking a menu item will dismiss the menu.  Clicking a submenu trigger will not dismiss the menu.

The `no-dismiss` attribute must take a string, either empty or `'true'` because react doesn't allow boolean custom attributes.
This commit is contained in:
Gazook89
2026-05-27 22:21:28 -05:00
parent d368e53b30
commit 612614fa12
2 changed files with 19 additions and 1 deletions
+19
View File
@@ -72,6 +72,24 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
}
};
// handle clicks on menu items. By default, actions do dismiss.
const handleMenuActionClick = (event)=>{
const menuElement = menuRef.current;
if(!menuElement) return;
const menuAction = event.target.closest('button, a, [role="menuitem"]');
if(!menuAction || !menuElement.contains(menuAction)) return;
// don't dismiss if the target triggers a submenu
if(menuAction.hasAttribute('popoverTarget')) return;
// don't dismiss if the target has `no-dismiss` attribute
const noDismissValue = menuAction.getAttribute('no-dismiss')?.toLowerCase();
if(noDismissValue === '' || noDismissValue === 'true') return;
document.querySelectorAll('.menu-list:popover-open').forEach((openMenu)=>openMenu.hidePopover());
};
return (
<div className={['menu-wrapper', className].join(' ')} role='none' >
<button
@@ -93,6 +111,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
className='menu-list'
popover='auto'
role='menu'
onClick={handleMenuActionClick}
>
{children}
</div>
@@ -322,7 +322,6 @@ const SnippetGroup = createReactClass({
};
},
handleSnippetClick : function(e, snippet){
e.stopPropagation();
this.props.onSnippetClick(execute(snippet.gen, this.props));
},
renderSnippets : function(snippets){