adobe / adobe/react-spectrum

Spectrum 2 ActionMenu renders too narrow for descriptions on page right

Open
#10,050 2 comments 0 reactions 0 assignees View on GitHub
ActionMenu Overlay Positioning
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

When an S2 ActionMenu is rendered on the right edge of the page and it has a description for at least one menu item, it initially renders at too narrow a width and expands to the left after. This results in a short animation as the menu expands in width and narrows in height. This happens even when the menu is set to `align: "end"`.

### 🤔 Expected Behavior?

The menu should open to the left of the trigger at whatever width will correctly fit all the content, including menu item descriptions

### 😯 Current Behavior

The menu opens to the left of the trigger at a narrow width and expands to the left until all the text fits

### 💁 Possible Solution

I would guess that whatever calculations are being done to determine the width of the menu aren't including the description, so the menu renders initially at a width only large enough for the label text and icon.

### 🔦 Context

I have an ActionMenu menu that renders on the right edge of a page only when the user is significantly zoomed in or on a small screen. Because of this, the animation is highly visible to users

### 🖥️ Steps to Reproduce

Here is the CodeSanbox to reproduce: https://codesandbox.io/p/devbox/admiring-tamas-w6rh5g?workspaceId=ws_7FVZWaB87q5MpjbWooJK1U

### Version

S2: 1.2.0

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

macOS Sequoia 15.7.4

### 🧢 Your Company/Team

Unified Home

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox reproduction and inspect the Spectrum 2 ActionMenu behavior when it is aligned to the page's right edge and includes item descriptions. Trace the width calculation from the ActionMenu entry point, then verify that the menu opens at its final content-fitting width without the visible expansion animation.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.