UPDATE:
This issue is considered an 'edge case' and will not be fixed by the Angular team. You can take a look at this github issue for the full detail: https://github.com/angular/components/issues/23051.
I still like to get a workaround. I have tried to disable the ripple effect on the tab group and trigger it on tab-change but I have some problems triggering it on the individual tab. Any direction would be appreciated.
Original Descirption:
I'm using Angular 11 with Angular Material. I have a simple tab group with a "mat-stretch-tabs" directive in order to have the tabs expand to the correct width depending on the content. However, if you click on the tab where the content width is larger than the previous tab content, the ripple effect doesn't get applied to the full tab-width but only to the initial tab-width, as illustrated in the below screenshot:
I have created a stackblitz to illustrate it:
Just click between the tabs (label 1 and label 2) and look at the ripple effect on the second tab.
Am I missing something or is there a simple fix to this?
Edit: From what I understand, the 'stretch-tabs' directive can be used at this specific use case where I want the tab to grow to match the content size, but it doesn't work well with its default ripple effect (Feel free to point out my misunderstanding). I do not want to have a fixed width for the parent card (that contains the tab group) because it fixes the width for the tabs. Instead, the tab width should change depending on the content it contains. I want to know if there is a way to fix this.