[Bug]:

[miroslavstastny]

Component

Other...

Package version

9.54.6

React version

18.2.0

Environment

-

Current Behavior

MenuItem with long text wrapped to multiple lines does not align with MenuItemRadio:

Expected Behavior

All items should be aligned.

Reproduction

https://stackblitz.com/edit/rw583v?file=src%2Fexample.tsx

Steps to reproduce

Open the menu and check left side of the individual items.

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[miroslavstastny]

Workaround set flex-shrink: 0 on checkmark slot.

const useStyles = makeStyles({
  menuItemCheckmark: {
    flexShrink: 0,
  },
});

//...

<MenuItem checkmark={{ className: classes.menuItemCheckmark }}>
  MenuItem that has realllllllllllllllllllllllllllllllllllllllllllllllly long text
</MenuItem>