From 484058b80ee335414d9523d16cd669c449ef3762 Mon Sep 17 00:00:00 2001
From: Egor Volvachev <34657605+volvachev@users.noreply.github.com>
Date: Thu, 4 Aug 2022 20:47:21 +0300
Subject: [PATCH] fix(material/tooltip): avoid problem when triggers hide
 animation for not visible tooltip (#24652)

Fixes a bug in Angular Material `tooltip` when `mat-tooltip-hide` class trigger animation for not visible tooltip.

Fixes #24614

(cherry picked from commit 3041cdab6af72cc5d81cb0f9ee9e2c60ebed5c5a)
---
 src/material/tooltip/tooltip.ts | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/material/tooltip/tooltip.ts b/src/material/tooltip/tooltip.ts
index 77c9a665acb4..95be4460dc24 100644
--- a/src/material/tooltip/tooltip.ts
+++ b/src/material/tooltip/tooltip.ts
@@ -989,8 +989,22 @@ export abstract class _TooltipComponentBase implements OnDestroy {
     const tooltip = this._tooltip.nativeElement;
     const showClass = this._showAnimation;
     const hideClass = this._hideAnimation;
-    tooltip.classList.remove(isVisible ? hideClass : showClass);
-    tooltip.classList.add(isVisible ? showClass : hideClass);
+
+    if (isVisible) {
+      tooltip.classList.remove(hideClass);
+      tooltip.classList.add(showClass);
+    }
+
+    if (!isVisible) {
+      // It's avoids the problem when `mat-tooltip-hide` triggers the animation of
+      // a tooltip that has not been shown yet.
+      if (tooltip.classList.contains(showClass)) {
+        tooltip.classList.add(hideClass);
+      }
+
+      tooltip.classList.remove(showClass);
+    }
+
     this._isVisible = isVisible;
 
     // It's common for internal apps to disable animations using `* { animation: none !important }`