mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-08-06 08:57: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:
@@ -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 (
|
return (
|
||||||
<div className={['menu-wrapper', className].join(' ')} role='none' >
|
<div className={['menu-wrapper', className].join(' ')} role='none' >
|
||||||
<button
|
<button
|
||||||
@@ -93,6 +111,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
|
|||||||
className='menu-list'
|
className='menu-list'
|
||||||
popover='auto'
|
popover='auto'
|
||||||
role='menu'
|
role='menu'
|
||||||
|
onClick={handleMenuActionClick}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -322,7 +322,6 @@ const SnippetGroup = createReactClass({
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
handleSnippetClick : function(e, snippet){
|
handleSnippetClick : function(e, snippet){
|
||||||
e.stopPropagation();
|
|
||||||
this.props.onSnippetClick(execute(snippet.gen, this.props));
|
this.props.onSnippetClick(execute(snippet.gen, this.props));
|
||||||
},
|
},
|
||||||
renderSnippets : function(snippets){
|
renderSnippets : function(snippets){
|
||||||
|
|||||||
Reference in New Issue
Block a user