fix(material/tooltip): animation not cancelled when mouseleave goes t…

…hrough 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 6526277)

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. */

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)