From 9909f2a33844c8dfe0a481f3aa0895b8dbb3be9a Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 3 Oct 2022 17:08:10 +0200
Subject: [PATCH] fix(material/tooltip): animation not cancelled when
 mouseleave goes through tooltip (#25740)

We ignore `mouseleave` events that go into the tooltip which meant that some animations weren't being cancelled correctly after the fix in #25699. These changes resolve the issue by skipping all animations if the tooltip isn't fully shown yet.

Fixes #24614.

(cherry picked from commit 6526277d4af739d7705989478d979042c20aad58)
---
 src/material/tooltip/tooltip.ts            | 19 ++++++++++++-------
 tools/public_api_guard/material/tooltip.md |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/material/tooltip/tooltip.ts b/src/material/tooltip/tooltip.ts
index 11f98309b006..e5fab823e819 100644
--- a/src/material/tooltip/tooltip.ts
+++ b/src/material/tooltip/tooltip.ts
@@ -378,7 +378,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
   /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
   show(delay: number = this.showDelay): void {
     if (this.disabled || !this.message || this._isTooltipVisible()) {
-      this._tooltipInstance?._cancelPendingHide();
+      this._tooltipInstance?._cancelPendingAnimations();
       return;
     }
 
@@ -406,6 +406,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
       if (instance.isVisible()) {
         instance.hide(delay);
       } else {
+        instance._cancelPendingAnimations();
         this._detach();
       }
     }
@@ -924,8 +925,7 @@ export abstract class _TooltipComponentBase implements OnDestroy {
   }
 
   ngOnDestroy() {
-    clearTimeout(this._showTimeoutId);
-    clearTimeout(this._hideTimeoutId);
+    this._cancelPendingAnimations();
     this._onHide.complete();
     this._triggerElement = null!;
   }
@@ -952,7 +952,11 @@ export abstract class _TooltipComponentBase implements OnDestroy {
 
   _handleMouseLeave({relatedTarget}: MouseEvent) {
     if (!relatedTarget || !this._triggerElement.contains(relatedTarget as Node)) {
-      this.hide(this._mouseLeaveHideDelay);
+      if (this.isVisible()) {
+        this.hide(this._mouseLeaveHideDelay);
+      } else {
+        this._finalizeAnimation(false);
+      }
     }
   }
 
@@ -970,10 +974,11 @@ export abstract class _TooltipComponentBase implements OnDestroy {
     }
   }
 
-  /** Cancels any pending hiding sequences. */
-  _cancelPendingHide() {
+  /** Cancels any pending animation sequences. */
+  _cancelPendingAnimations() {
+    clearTimeout(this._showTimeoutId);
     clearTimeout(this._hideTimeoutId);
-    this._hideTimeoutId = undefined;
+    this._showTimeoutId = this._hideTimeoutId = undefined;
   }
 
   /** Handles the cleanup after an animation has finished. */
diff --git a/tools/public_api_guard/material/tooltip.md b/tools/public_api_guard/material/tooltip.md
index c94963e98766..633fd4327625 100644
--- a/tools/public_api_guard/material/tooltip.md
+++ b/tools/public_api_guard/material/tooltip.md
@@ -174,7 +174,7 @@ export class TooltipComponent extends _TooltipComponentBase {
 export abstract class _TooltipComponentBase implements OnDestroy {
     constructor(_changeDetectorRef: ChangeDetectorRef, animationMode?: string);
     afterHidden(): Observable<void>;
-    _cancelPendingHide(): void;
+    _cancelPendingAnimations(): void;
     _handleAnimationEnd({ animationName }: AnimationEvent): void;
     _handleBodyInteraction(): void;
     // (undocumented)