Description
What
Add a callback to the ActionMenu
component that returns the direction the dropdown menu will appear (above the anchor, below it, left, right)
Why
This will allow consumers of the component to change the order of the list based on the direction the menu will appear. Today, there's no way to accurately determine this.
Usage Example:
In Copilot Immersive, there's an ActionMenu
for retrying a Copilot response. When clicked, the options in the dropdown are the various LLMs the user can retry with. There's an additional option, "Try again", which retries with the existing model. The "Try again" option is the one most selected, so it's important to keep it close to the button.
Below | Above |
---|---|
![]() |
![]() |
Today, putting the "Try again" option at the beginning or end of the item list is roughly calculated based on the position of the button on the screen:
useEffect(() => {
// Calculate whether the menu will drop up or drop down.
// This is so we can dynamically put the "Try again" option closest to the button.
// Note: this isn't fully accurate for every screen size, but it's close, and preferable to a fixed item ordering.
if (componentRef.current) {
const rect = componentRef.current.getBoundingClientRect()
setMenuDirection(rect.bottom > window.innerHeight / 1.55 ? 'up' : 'down')
}
}, [menuDirection])
But this calculation isn't accurate for all screen sizes, which is why we want the ability to get the menu direction directly from the component.