Problem
The reimplemented Menu component (src/diagram/components/Menu.tsx) cannot be dismissed by clicking its own trigger button while it is open. Clicking the trigger flickers the menu closed and immediately reopens it.
The outside-dismiss effect (Menu.tsx:91-112) registers a document mousedown listener that calls onClose() whenever a press lands outside the menu content (contentRef):
const onMouseDown = (event: MouseEvent): void => {
const content = contentRef.current;
if (content && !content.contains(event.target as Node)) {
onClose();
}
};
The trigger button is not inside the menu content (e.g. the account IconButton in src/app/Home.tsx:256-274), and the menu's own proxy <span> is pointer-events: none (Menu.tsx:136-146), so it cannot absorb the press either. Clicking the trigger while the menu is open therefore produces:
mousedown -> document outside listener -> onClose() (menu closes)
click -> trigger's handleMenu -> setAnchorEl(currentTarget) (menu reopens)
Net effect: the toolbar account menu can no longer be toggled shut by clicking its own trigger; it flickers closed and immediately reopens. Escape and clicking elsewhere still dismiss it correctly.
Why it matters
This is a behavioral regression in a shared, reused component. Toggling a menu by clicking its trigger again is a standard, expected interaction (the prior Radix-based implementation handled this). It affects every caller that uses a trigger button outside the menu content, including the account menu in the app toolbar.
Component(s) affected
src/diagram/components/Menu.tsx (the dismiss effect)
- Callers with an external trigger, e.g.
src/app/Home.tsx account menu
Suggested fix
Pass anchorEl into the dismiss effect and skip onClose() when the press lands on the trigger:
if (content && !content.contains(target) && !(anchorEl?.contains(target))) {
onClose();
}
(Add anchorEl to the effect's dependency array.)
Also add a regression test in src/diagram/tests/menu.test.tsx -- the current tests only cover anchor positioning, not outside-click / trigger-toggle dismissal. Cover: (a) clicking outside closes, (b) clicking the trigger while open does not leave the menu reopened, (c) Escape closes.
How discovered
Identified during review of PR #804 (branch dep-diet-round2), which reimplements the Menu component. This may merge with #804 if not caught.
Problem
The reimplemented
Menucomponent (src/diagram/components/Menu.tsx) cannot be dismissed by clicking its own trigger button while it is open. Clicking the trigger flickers the menu closed and immediately reopens it.The outside-dismiss effect (Menu.tsx:91-112) registers a document
mousedownlistener that callsonClose()whenever a press lands outside the menu content (contentRef):The trigger button is not inside the menu content (e.g. the account
IconButtoninsrc/app/Home.tsx:256-274), and the menu's own proxy<span>ispointer-events: none(Menu.tsx:136-146), so it cannot absorb the press either. Clicking the trigger while the menu is open therefore produces:mousedown-> document outside listener ->onClose()(menu closes)click-> trigger'shandleMenu->setAnchorEl(currentTarget)(menu reopens)Net effect: the toolbar account menu can no longer be toggled shut by clicking its own trigger; it flickers closed and immediately reopens. Escape and clicking elsewhere still dismiss it correctly.
Why it matters
This is a behavioral regression in a shared, reused component. Toggling a menu by clicking its trigger again is a standard, expected interaction (the prior Radix-based implementation handled this). It affects every caller that uses a trigger button outside the menu content, including the account menu in the app toolbar.
Component(s) affected
src/diagram/components/Menu.tsx(the dismiss effect)src/app/Home.tsxaccount menuSuggested fix
Pass
anchorElinto the dismiss effect and skiponClose()when the press lands on the trigger:(Add
anchorElto the effect's dependency array.)Also add a regression test in
src/diagram/tests/menu.test.tsx-- the current tests only cover anchor positioning, not outside-click / trigger-toggle dismissal. Cover: (a) clicking outside closes, (b) clicking the trigger while open does not leave the menu reopened, (c) Escape closes.How discovered
Identified during review of PR #804 (branch
dep-diet-round2), which reimplements theMenucomponent. This may merge with #804 if not caught.