bug(menu): Overflow behaviour does not match the documentation

[freon27]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

The behaviour when a menu button label has a long work (that can't be broken) is different in a newly created app than on the Angular Material demo page.

The overflow: hidden on .mdc-list-item__primary-text appears to be missing.

Material documentation page edited to make the label longer:

App that copies the same code:

Reproduction

Steps to reproduce:

1. https://components-issue-5kgmsj.stackblitz.io (this is a copy of the code from the basic menu example but with a long label)
2. click to open the menu
3. the label overflows the content instead of getting an ellipsis

Expected Behavior

Ellipsis

Actual Behavior

Overflows

Environment

• Angular: 15.2.3
• CDK/Material: 15.2.3
• Browser(s): all
• Operating System (e.g. Windows, macOS, Ubuntu): mac

[freon27]

@crisbeto Hi, I saw that you started working on a fix. Thanks 🙂

It seems weird that you would need to add these styles again though.

It already works in the Angular Material Documentation page for 15.2.3 (and also in an app that I have, which creates a custom Material theme locally in SCSS).

In the cases where it works, the overflow styles seem to be added in inline <style> tags. As far as I can tell, the same styles aren't in the generated .css theme files. Is that possible?

My main worry is that there might be other styles for other components that are also not getting applied.

[crisbeto]

The problem was that we use the MDC list styles in material/menu, material/list, material/core and material/autocomplete. The list was bringing in the overflow: hidden, but that breaks down if there are no lists on the page. I think that reintroducing the styles is the right way to go so that the menu behaves consistently on its own.

[freon27]

Ahh, thanks for the explanation. That makes sense.

I actually briefly considered that as a possibility and wanted to try adding a list to my page for testing - but I think I was so deep down the rabbit hole trying to work out what was going on I got distracted by another idea before testing it!