From b5c5bf4d387bd1bf272813ff589ce88dcb4b9c95 Mon Sep 17 00:00:00 2001
From: Matthieu Riegler <kyro38@gmail.com>
Date: Mon, 10 Jun 2024 00:08:53 +0200
Subject: [PATCH] fix(material/tabs): remove visibility style when hydrating

Before this commit, when using pre-rendering, the styling animation would only remove the `transform` style when hydrating the component. This commit fixes this by including `visibility` as styles to remove when playing the animations.
---
 src/material/tabs/tab-group.spec.ts  | 10 +++++-----
 src/material/tabs/tabs-animations.ts |  7 +++++--
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/material/tabs/tab-group.spec.ts b/src/material/tabs/tab-group.spec.ts
index c0c32fd0db50..83406db73dd4 100644
--- a/src/material/tabs/tab-group.spec.ts
+++ b/src/material/tabs/tab-group.spec.ts
@@ -1,5 +1,6 @@
 import {LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
 import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private';
+import {CommonModule} from '@angular/common';
 import {
   Component,
   DebugElement,
@@ -11,15 +12,14 @@ import {
 } from '@angular/core';
 import {
   ComponentFixture,
+  TestBed,
   fakeAsync,
   flush,
-  TestBed,
   tick,
   waitForAsync,
 } from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {CommonModule} from '@angular/common';
 import {Observable} from 'rxjs';
 import {
   MAT_TABS_CONFIG,
@@ -772,7 +772,7 @@ describe('MDC-based MatTabGroup', () => {
       );
 
       expect(contentElements.map(element => element.style.visibility)).toEqual([
-        '',
+        'visible',
         'hidden',
         'hidden',
         'hidden',
@@ -785,7 +785,7 @@ describe('MDC-based MatTabGroup', () => {
       expect(contentElements.map(element => element.style.visibility)).toEqual([
         'hidden',
         'hidden',
-        '',
+        'visible',
         'hidden',
       ]);
 
@@ -795,7 +795,7 @@ describe('MDC-based MatTabGroup', () => {
 
       expect(contentElements.map(element => element.style.visibility)).toEqual([
         'hidden',
-        '',
+        'visible',
         'hidden',
         'hidden',
       ]);
diff --git a/src/material/tabs/tabs-animations.ts b/src/material/tabs/tabs-animations.ts
index 5e7955d4a373..e0097556cba2 100644
--- a/src/material/tabs/tabs-animations.ts
+++ b/src/material/tabs/tabs-animations.ts
@@ -6,12 +6,12 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {
+  AnimationTriggerMetadata,
   animate,
   state,
   style,
   transition,
   trigger,
-  AnimationTriggerMetadata,
 } from '@angular/animations';
 
 /**
@@ -24,7 +24,10 @@ export const matTabsAnimations: {
   /** Animation translates a tab along the X axis. */
   translateTab: trigger('translateTab', [
     // Transitions to `none` instead of 0, because some browsers might blur the content.
-    state('center, void, left-origin-center, right-origin-center', style({transform: 'none'})),
+    state(
+      'center, void, left-origin-center, right-origin-center',
+      style({transform: 'none', visibility: 'visible'}),
+    ),
 
     // If the tab is either on the left or right, we additionally add a `min-height` of 1px
     // in order to ensure that the element has a height before its state changes. This is