angular / angular/components

MatDrawerContainer opened and mode="side" doesn't work as expected inside a MatTabGroup

Open
#16,920 4 comments 0 reactions 0 assignees View on GitHub
area: material/sidenav P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Description

If we have a MatDrawerContainer with initial state opened and mode="side"or mode="push" in a tab that is not visible, when we go to the tab, the MatDrawerContent is not correctly shrinked.

#### Reproduction

StackBlitz: https://stackblitz.com/edit/angular-9hnnl8

Steps: -Just switch to tabs 2 or 3.

#### Expected Behavior

I expect the drawer content to shrink if the drawer is opened (as it happens normally)

#### Actual Behavior

The MatDrawerContent of the not selected tabs is not correctly shrinked.

#### Environment

- Angular:
- CDK/Material:
- Browser(s): Chrome
- Operating System: Windows

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect the interaction between MatDrawerContainer and MatTabGroup when tabs 2 and 3 become visible. Check initially opened drawers in side and push modes, and verify that MatDrawerContent shrinks correctly after switching tabs. Done means the content has the expected size in both tabs.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.