Current Behavior
In the ActionButton component, clicking the dropdown arrow opens the menu misaligned and shifted to the right.
This happens because the Popper anchors dynamically to event.currentTarget (the small arrow button) instead of the entire ButtonGroup.
Expected Behavior
The dropdown menu should always open at a consistent, aligned position under the ButtonGroup, whether the user clicks the primary button or the dropdown arrow button.
Root Cause
anchorEl was set to event.currentTarget inside handleToggle, which points only to the arrow button on the right edge.ButtonGroup was missing a ref={anchorRef}.
Related Issue
Environment
- Component:
@sistent/sistent (src/custom/ActionButton/ActionButton.tsx)
- Consumers: Kanvas (MeshMap), Meshery UI
Current Behavior
In the
ActionButtoncomponent, clicking the dropdown arrow opens the menu misaligned and shifted to the right.This happens because the
Popperanchors dynamically toevent.currentTarget(the small arrow button) instead of the entireButtonGroup.Expected Behavior
The dropdown menu should always open at a consistent, aligned position under the
ButtonGroup, whether the user clicks the primary button or the dropdown arrow button.Root Cause
anchorElwas set toevent.currentTargetinsidehandleToggle, which points only to the arrow button on the right edge.ButtonGroupwas missing aref={anchorRef}.Related Issue
Environment
@sistent/sistent(src/custom/ActionButton/ActionButton.tsx)