bug(menu): menu is triggering custom animation of a custom component used inside it

[iKrishnaSahu]

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

No response

Description

bug(menu): menu is triggering custom animation of a custom component used inside it

StackBlitz link - https://stackblitz.com/edit/8ve6wn?file=src%2Fapp%2Fmenu-icons-example.html

Reproduction

Steps to reproduce:

1. Visit this stackblitz - https://stackblitz.com/edit/8ve6wn?file=src%2Fapp%2Fmenu-icons-example.html
2. Once the UI loads, click on vertical ellipsis button
3. Click outside the popup. For a fraction of section, you will see the animation of demo-statusbar has been triggered and content is visible
4. Open the menu again and check extra content from demo-statusbar is visible

Expected Behavior

Closing menu should not trigger any custom component's custom animation

Actual Behavior

Closing menu is triggering custom component's custom animation

Environment

• Angular: 15
• CDK/Material: 15
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[iKrishnaSahu]

I am unable to reproduce this in Angular 16 as stackblitz is down for v16 - #27300

[iKrishnaSahu]

Same issue in v16 - https://stackblitz.com/edit/8ve6wn-znskfp?file=src%2Fapp%2Fmenu-icons-example.html

[mmalerba]

Confirmed the issue, here's a less noisy version of the stackblitz that can still repro: https://stackblitz.com/edit/8ve6wn-pvbwzz (only a single status bar instance, and removed the second animation)