bug(cdkLayout): BreakpointObserver is broken after closing a dialog

[jcabannes]

Reproduction

Use StackBlitz to reproduce your issue:
https://stackblitz.com/edit/angular-r2s6fh?file=src/app/app.component.ts

Steps to reproduce:

1. Click on child 1
2. Resize window, you will see the displayed size changing in mat-drawer-content
3. Click on "Pick one" button
4. Close dialog
5. Reisze window, the displayed size does not match the current window size

Expected Behavior

The displayed size in mat-drawer-content should match the current window size

Actual Behavior

The displayed size in mat-drawer-content does not match the current window size

Environment

• Angular: 12.0.0
• CDK/Material: 12.2.4
• Browser(s): Chrome 92.0.4515.107
• Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 20.04.3 LTS

[crisbeto]

I suspect that this has more to do with all the other custom logic in the example, rather than the dialog. I tried isolating it in our dev app by only having the BreakpointObserver.observe and opening a dialog which didn't cause the issue. Have you been able to isolate this further?

[christophechevalier]

Additionnal informations: it seems appears only on Chrome browser.

[jcabannes]

Hello @crisbeto here another StackBlitz without ngxs https://stackblitz.com/edit/angular-r2s6fh-3gmgql?file=src/index.html and the issue is still present on Chrome

[crisbeto]

Thank you, that should be much easier to investigate. It's also weird, considering that I ended up with something very close to your example when trying to reproduce it.