Skip to content

Commit

Permalink
fix(context-menu): nested menus
Browse files Browse the repository at this point in the history
Add props to stop propagation of mouse events so nested menus don't all open at once.
  • Loading branch information
psychedelicious committed Aug 24, 2024
1 parent 741e2ed commit fcf802c
Showing 1 changed file with 9 additions and 1 deletion.
10 changes: 9 additions & 1 deletion lib/components/context-menu/context-menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ export interface ContextMenuProps<T extends HTMLElement = HTMLDivElement> {
menuProps?: Omit<MenuProps, 'children'> & { children?: React.ReactNode };
portalProps?: Omit<PortalProps, 'children'> & { children?: React.ReactNode };
menuButtonProps?: MenuButtonProps;
stopPropagation?: boolean;
stopImmediatePropagation?: boolean;
}

export const ContextMenu = typedMemo(<T extends HTMLElement = HTMLElement>(props: ContextMenuProps<T>) => {
Expand All @@ -36,6 +38,12 @@ export const ContextMenu = typedMemo(<T extends HTMLElement = HTMLElement>(props
// `contains()` requires the arg to be Node. Technically it can be any EventTarget, but it won't cause an error.
/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
if (targetRef.current?.contains(e.target as Node) || e.target === targetRef.current) {
if (props.stopImmediatePropagation) {
e.stopImmediatePropagation();
}
if (props.stopPropagation) {
e.stopPropagation();
}
// clear pending delayed open
window.clearTimeout(timeoutRef.current);
e.preventDefault();
Expand All @@ -54,7 +62,7 @@ export const ContextMenu = typedMemo(<T extends HTMLElement = HTMLElement>(props
}
lastPositionRef.current = [e.pageX, e.pageY];
},
[onClose, onOpen]
[onClose, onOpen, props.stopImmediatePropagation, props.stopPropagation]
);

useEffect(
Expand Down

0 comments on commit fcf802c

Please sign in to comment.