bug(ResizeObserver): Mat-Tab vs Mat-label cause ResizeObserver loop completed with undelivered notifications

[JiaLiPassion]

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

Mat-Tab vs Mat-label cause ResizeObserver loop completed with undelivered notifications

Reproduction

StackBlitz link: https://stackblitz.com/edit/mi1wyz?file=src%2Fexample%2Fsidenav-drawer-overview-example.html,src%2Fexample%2Fsidenav-drawer-overview-example.css,src%2Fexample%2Fsidenav-drawer-overview-example.ts,src%2Findex.html

Steps to reproduce:

1. click Tab2
2. Add breakpoints in vendor.js:22456 loopLimitExceededErrorHandler
3. click toggle sidenav button multiple times.
   Will receive the error

ResizeObserver loop completed with undelivered notifications

Expected Behavior

No resizeobserver error

Actual Behavior

Will receive the error

ResizeObserver loop completed with undelivered notifications

Environment

Angular CLI: 17.0.0
Node: 18.18.0
Package Manager: yarn 1.22.19
OS: linux x64

Angular: 17.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1700.0
@angular-devkit/build-angular 17.0.0
@angular-devkit/core 17.0.0
@angular-devkit/schematics 17.0.0
@angular/cdk 17.0.5
@angular/localize 17.0.8
@angular/material 17.0.5
@angular/material-moment-adapter 17.0.5
@schematics/angular 17.0.0
rxjs 7.4.0
typescript 5.2.2
zone.js 0.14.0

[tortuc]

I got that issue also.

[npc9000]

@JiaLiPassion looks like the error is related to the attribute 'mat-stretch-tabs' of the mat-tab-group.
I solved it by disabling the stretch of the group -- that is, setting [mat-stretch-tabs]="false" on the tag.

[JiaLiPassion]

@npc9000, thank you and yes, [mat-stretch-tabs]="false" works, but the tab title will not fill the tab header...

[npc9000]

@npc9000, thank you and yes, [mat-stretch-tabs]="false" works, but the tab title will not fill the tab header...

Yes, I know, in fact I was lucky because the design of the application I am currently working on did not expect the tabs to be stretched....the issue definitely needs to be addressed, otherwise it could become a show-stopper.

[muchbetterug]

+1, found this issue during testing with cypress.

[mat-stretch-tabs]="false" OR [disablePagination]="true" works as a workaround.

but making [disablePagination]="true" and showing a scrollbar instead gives me a11y errors