bug(MatTabGroup): Visibility hidden mat-active-tab is not removed when MatTabGroup and MatTabs are used inside MatMenu

[swapnil-verma-gl]

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

If we use MatTabGroup + MatTabs inside the MatMenu component, then in some cases the visibility hidden inline styling is not getting removed from the active tab. Refer steps or attached video for more details

angular-material-tabs.mp4

Once the state has been reached, switching between more tabs can eventually 'fix' it, but only for that opening of the menu. Closing and reopening the menu can result in the issue reproducing again. A workaround, that is also demoed in the video, is to add custom styles, setting visibility to visible. Since the erroneous styling is applied inline, this workaround also requires the use of !important tag, which is fine for now, but not suitable as a permanent solution.

I'm also attaching the link to a sample github project that I used in the video recording, for more info on how the code is structured.

https://github.com/swapnil-verma-gl/angular-material-tabs

Addl note - While the project and the video use Angular Material v16, I can confirm that this issue is also present in at least angular v14, as that is what our actual project uses, and is where we first encountered this bug.

Reproduction

Stackblitz Link - https://stackblitz.com/edit/klkt9a-mfwvvv?file=package.json
Steps to reproduce:

1. Create a component with a MatMenu and its trigger
2. Inside the MatMenu, add a MatTabGroup, with a couple of tabs
3. For each tab, add some content. This may be content directly inside the mat tab, or getting projected from another component
4. Now, open the menu and switch between some tabs
5. Close the menu
6. Repeat steps 4 and 5 repeatedly. Eventually, you will reach a state where the content for the active tab is not being shown. Refer video recording for more details

Expected Behavior

Content for active tab is visible

Actual Behavior

Content for active tab is hidden.

Environment

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

[zarend]

Hello,

Thank you for reporting this. I do not believe that using MatTabGroup inside of a Menu is a supported configuration. MatMenu implements the ARIA menu interaction pattern, which allows menus to have menuitems and other menus inside of them. Tabs inside of a menu is not part of the interaction pattern.

If you would like to present tabs in a pop-up, I suggest using an Overlay instead.

-Zach

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}