Skip to content

ActionList.Item active prop changes text weight, which can cause the item/menu width to shift when toggled #6162

Open
@iansan5653

Description

@iansan5653

When the active prop is applied to an ActionList.Item, the width of the text changes because the weight of the text changes. For dynamically sized menus, this can cause the entire menu to change in width depending on which item is selected:

Screen.Recording.2025-05-29.at.1.02.12.PM.mov

For now, I've worked around this with a hack to disable bold styling when the active prop is applied, but this is a pretty bad solution:

.suggestion[data-active] > div > span > span {
  font-weight: var(--base-text-weight-normal);
}

Ideally, the item would compensate for the width of the potentially bold text, possibly by rendering a hidden duplicate of the text in bold.

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions