Skip to content

Commit 218297a

Browse files
authored
fix(material/tooltip): animations running when timeouts haven't elapsed (#25699)
After the tooltips were switched to CSS animations, a regression was introduced where the opposite animation is shown even if the tooltip didn't actually reach its target state. These changes are an alternate take on the fix from #24652 which had to be reverted due to internal failures. Fixes #24614.
1 parent 90e6446 commit 218297a

File tree

4 files changed

+19
-21
lines changed

4 files changed

+19
-21
lines changed

src/material/legacy-tooltip/tooltip.spec.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -586,7 +586,6 @@ describe('MatTooltip', () => {
586586
const tooltipDelay = 1000;
587587
tooltipDirective.hide();
588588
tick(tooltipDelay); // Change the tooltip state to hidden and trigger animation start
589-
finishCurrentTooltipAnimation(overlayContainerElement, false);
590589

591590
fixture.componentInstance.showButton = false;
592591
fixture.detectChanges();
@@ -605,7 +604,6 @@ describe('MatTooltip', () => {
605604
tooltipDirective.hide(0);
606605
tick(0);
607606
fixture.detectChanges();
608-
finishCurrentTooltipAnimation(overlayContainerElement, false);
609607

610608
expect(spy).toHaveBeenCalled();
611609
subscription.unsubscribe();

src/material/tooltip/tooltip.spec.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -591,7 +591,6 @@ describe('MDC-based MatTooltip', () => {
591591
const tooltipDelay = 1000;
592592
tooltipDirective.hide();
593593
tick(tooltipDelay); // Change the tooltip state to hidden and trigger animation start
594-
finishCurrentTooltipAnimation(overlayContainerElement, false);
595594

596595
fixture.componentInstance.showButton = false;
597596
fixture.detectChanges();
@@ -610,7 +609,6 @@ describe('MDC-based MatTooltip', () => {
610609
tooltipDirective.hide(0);
611610
tick(0);
612611
fixture.detectChanges();
613-
finishCurrentTooltipAnimation(overlayContainerElement, false);
614612

615613
expect(spy).toHaveBeenCalled();
616614
subscription.unsubscribe();

src/material/tooltip/tooltip.ts

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -408,13 +408,8 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
408408

409409
/** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */
410410
show(delay: number = this.showDelay, origin?: {x: number; y: number}): void {
411-
if (
412-
this.disabled ||
413-
!this.message ||
414-
(this._isTooltipVisible() &&
415-
!this._tooltipInstance!._showTimeoutId &&
416-
!this._tooltipInstance!._hideTimeoutId)
417-
) {
411+
if (this.disabled || !this.message || this._isTooltipVisible()) {
412+
this._tooltipInstance?._cancelPendingHide();
418413
return;
419414
}
420415

@@ -436,8 +431,14 @@ export abstract class _MatTooltipBase<T extends _TooltipComponentBase>
436431

437432
/** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input */
438433
hide(delay: number = this.hideDelay): void {
439-
if (this._tooltipInstance) {
440-
this._tooltipInstance.hide(delay);
434+
const instance = this._tooltipInstance;
435+
436+
if (instance) {
437+
if (instance.isVisible()) {
438+
instance.hide(delay);
439+
} else {
440+
this._detach();
441+
}
441442
}
442443
}
443444

@@ -908,13 +909,10 @@ export abstract class _TooltipComponentBase implements OnDestroy {
908909
tooltipClass: string | string[] | Set<string> | {[key: string]: any};
909910

910911
/** The timeout ID of any current timer set to show the tooltip */
911-
_showTimeoutId: number | undefined;
912+
private _showTimeoutId: number | undefined;
912913

913914
/** The timeout ID of any current timer set to hide the tooltip */
914-
_hideTimeoutId: number | undefined;
915-
916-
/** Property watched by the animation framework to show or hide the tooltip */
917-
_visibility: TooltipVisibility = 'initial';
915+
private _hideTimeoutId: number | undefined;
918916

919917
/** Element that caused the tooltip to open. */
920918
_triggerElement: HTMLElement;
@@ -1035,6 +1033,12 @@ export abstract class _TooltipComponentBase implements OnDestroy {
10351033
}
10361034
}
10371035

1036+
/** Cancels any pending hiding sequences. */
1037+
_cancelPendingHide() {
1038+
clearTimeout(this._hideTimeoutId);
1039+
this._hideTimeoutId = undefined;
1040+
}
1041+
10381042
/** Handles the cleanup after an animation has finished. */
10391043
private _finalizeAnimation(toVisible: boolean) {
10401044
if (toVisible) {

tools/public_api_guard/material/tooltip.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -188,13 +188,13 @@ export class TooltipComponent extends _TooltipComponentBase {
188188
export abstract class _TooltipComponentBase implements OnDestroy {
189189
constructor(_changeDetectorRef: ChangeDetectorRef, animationMode?: string);
190190
afterHidden(): Observable<void>;
191+
_cancelPendingHide(): void;
191192
_handleAnimationEnd({ animationName }: AnimationEvent): void;
192193
_handleBodyInteraction(): void;
193194
// (undocumented)
194195
_handleMouseLeave({ relatedTarget }: MouseEvent): void;
195196
hide(delay: number): void;
196197
protected abstract readonly _hideAnimation: string;
197-
_hideTimeoutId: number | undefined;
198198
isVisible(): boolean;
199199
_markForCheck(): void;
200200
message: string;
@@ -204,13 +204,11 @@ export abstract class _TooltipComponentBase implements OnDestroy {
204204
protected _onShow(): void;
205205
show(delay: number): void;
206206
protected abstract readonly _showAnimation: string;
207-
_showTimeoutId: number | undefined;
208207
abstract _tooltip: ElementRef<HTMLElement>;
209208
tooltipClass: string | string[] | Set<string> | {
210209
[key: string]: any;
211210
};
212211
_triggerElement: HTMLElement;
213-
_visibility: TooltipVisibility;
214212
// (undocumented)
215213
static ɵdir: i0.ɵɵDirectiveDeclaration<_TooltipComponentBase, never, never, {}, {}, never, never, false, never>;
216214
// (undocumented)

0 commit comments

Comments
 (0)