Skip to content

Commit 9909f2a

Browse files
committed
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 6526277)
1 parent 91dfa67 commit 9909f2a

File tree

2 files changed

+13
-8
lines changed

2 files changed

+13
-8
lines changed

src/material/tooltip/tooltip.ts

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -378,7 +378,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
378378
/** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
379379
show(delay: number = this.showDelay): void {
380380
if (this.disabled || !this.message || this._isTooltipVisible()) {
381-
this._tooltipInstance?._cancelPendingHide();
381+
this._tooltipInstance?._cancelPendingAnimations();
382382
return;
383383
}
384384

@@ -406,6 +406,7 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
406406
if (instance.isVisible()) {
407407
instance.hide(delay);
408408
} else {
409+
instance._cancelPendingAnimations();
409410
this._detach();
410411
}
411412
}
@@ -924,8 +925,7 @@ export abstract class _TooltipComponentBase implements OnDestroy {
924925
}
925926

926927
ngOnDestroy() {
927-
clearTimeout(this._showTimeoutId);
928-
clearTimeout(this._hideTimeoutId);
928+
this._cancelPendingAnimations();
929929
this._onHide.complete();
930930
this._triggerElement = null!;
931931
}
@@ -952,7 +952,11 @@ export abstract class _TooltipComponentBase implements OnDestroy {
952952

953953
_handleMouseLeave({relatedTarget}: MouseEvent) {
954954
if (!relatedTarget || !this._triggerElement.contains(relatedTarget as Node)) {
955-
this.hide(this._mouseLeaveHideDelay);
955+
if (this.isVisible()) {
956+
this.hide(this._mouseLeaveHideDelay);
957+
} else {
958+
this._finalizeAnimation(false);
959+
}
956960
}
957961
}
958962

@@ -970,10 +974,11 @@ export abstract class _TooltipComponentBase implements OnDestroy {
970974
}
971975
}
972976

973-
/** Cancels any pending hiding sequences. */
974-
_cancelPendingHide() {
977+
/** Cancels any pending animation sequences. */
978+
_cancelPendingAnimations() {
979+
clearTimeout(this._showTimeoutId);
975980
clearTimeout(this._hideTimeoutId);
976-
this._hideTimeoutId = undefined;
981+
this._showTimeoutId = this._hideTimeoutId = undefined;
977982
}
978983

979984
/** Handles the cleanup after an animation has finished. */

tools/public_api_guard/material/tooltip.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ export class TooltipComponent extends _TooltipComponentBase {
174174
export abstract class _TooltipComponentBase implements OnDestroy {
175175
constructor(_changeDetectorRef: ChangeDetectorRef, animationMode?: string);
176176
afterHidden(): Observable<void>;
177-
_cancelPendingHide(): void;
177+
_cancelPendingAnimations(): void;
178178
_handleAnimationEnd({ animationName }: AnimationEvent): void;
179179
_handleBodyInteraction(): void;
180180
// (undocumented)

0 commit comments

Comments
 (0)