diff --git a/src/material/legacy-tooltip/tooltip.spec.ts b/src/material/legacy-tooltip/tooltip.spec.ts index d08c7d4b0ac7..de9b7e455a3b 100644 --- a/src/material/legacy-tooltip/tooltip.spec.ts +++ b/src/material/legacy-tooltip/tooltip.spec.ts @@ -586,7 +586,6 @@ describe('MatTooltip', () => { const tooltipDelay = 1000; tooltipDirective.hide(); tick(tooltipDelay); // Change the tooltip state to hidden and trigger animation start - finishCurrentTooltipAnimation(overlayContainerElement, false); fixture.componentInstance.showButton = false; fixture.detectChanges(); @@ -605,7 +604,6 @@ describe('MatTooltip', () => { tooltipDirective.hide(0); tick(0); fixture.detectChanges(); - finishCurrentTooltipAnimation(overlayContainerElement, false); expect(spy).toHaveBeenCalled(); subscription.unsubscribe(); diff --git a/src/material/tooltip/tooltip.spec.ts b/src/material/tooltip/tooltip.spec.ts index 73f2e884ae24..12f86924974f 100644 --- a/src/material/tooltip/tooltip.spec.ts +++ b/src/material/tooltip/tooltip.spec.ts @@ -591,7 +591,6 @@ describe('MDC-based MatTooltip', () => { const tooltipDelay = 1000; tooltipDirective.hide(); tick(tooltipDelay); // Change the tooltip state to hidden and trigger animation start - finishCurrentTooltipAnimation(overlayContainerElement, false); fixture.componentInstance.showButton = false; fixture.detectChanges(); @@ -610,7 +609,6 @@ describe('MDC-based MatTooltip', () => { tooltipDirective.hide(0); tick(0); fixture.detectChanges(); - finishCurrentTooltipAnimation(overlayContainerElement, false); expect(spy).toHaveBeenCalled(); subscription.unsubscribe(); diff --git a/src/material/tooltip/tooltip.ts b/src/material/tooltip/tooltip.ts index 806e8b181675..c1203559961b 100644 --- a/src/material/tooltip/tooltip.ts +++ b/src/material/tooltip/tooltip.ts @@ -408,13 +408,8 @@ export abstract class _MatTooltipBase /** Shows the tooltip after the delay in ms, defaults to tooltip-delay-show or 0ms if no input */ show(delay: number = this.showDelay, origin?: {x: number; y: number}): void { - if ( - this.disabled || - !this.message || - (this._isTooltipVisible() && - !this._tooltipInstance!._showTimeoutId && - !this._tooltipInstance!._hideTimeoutId) - ) { + if (this.disabled || !this.message || this._isTooltipVisible()) { + this._tooltipInstance?._cancelPendingHide(); return; } @@ -436,8 +431,14 @@ export abstract class _MatTooltipBase /** Hides the tooltip after the delay in ms, defaults to tooltip-delay-hide or 0ms if no input */ hide(delay: number = this.hideDelay): void { - if (this._tooltipInstance) { - this._tooltipInstance.hide(delay); + const instance = this._tooltipInstance; + + if (instance) { + if (instance.isVisible()) { + instance.hide(delay); + } else { + this._detach(); + } } } @@ -908,13 +909,10 @@ export abstract class _TooltipComponentBase implements OnDestroy { tooltipClass: string | string[] | Set | {[key: string]: any}; /** The timeout ID of any current timer set to show the tooltip */ - _showTimeoutId: number | undefined; + private _showTimeoutId: number | undefined; /** The timeout ID of any current timer set to hide the tooltip */ - _hideTimeoutId: number | undefined; - - /** Property watched by the animation framework to show or hide the tooltip */ - _visibility: TooltipVisibility = 'initial'; + private _hideTimeoutId: number | undefined; /** Element that caused the tooltip to open. */ _triggerElement: HTMLElement; @@ -1035,6 +1033,12 @@ export abstract class _TooltipComponentBase implements OnDestroy { } } + /** Cancels any pending hiding sequences. */ + _cancelPendingHide() { + clearTimeout(this._hideTimeoutId); + this._hideTimeoutId = undefined; + } + /** Handles the cleanup after an animation has finished. */ private _finalizeAnimation(toVisible: boolean) { if (toVisible) { diff --git a/tools/public_api_guard/material/tooltip.md b/tools/public_api_guard/material/tooltip.md index 8db9038cee6c..8d9ff229a28c 100644 --- a/tools/public_api_guard/material/tooltip.md +++ b/tools/public_api_guard/material/tooltip.md @@ -188,13 +188,13 @@ export class TooltipComponent extends _TooltipComponentBase { export abstract class _TooltipComponentBase implements OnDestroy { constructor(_changeDetectorRef: ChangeDetectorRef, animationMode?: string); afterHidden(): Observable; + _cancelPendingHide(): void; _handleAnimationEnd({ animationName }: AnimationEvent): void; _handleBodyInteraction(): void; // (undocumented) _handleMouseLeave({ relatedTarget }: MouseEvent): void; hide(delay: number): void; protected abstract readonly _hideAnimation: string; - _hideTimeoutId: number | undefined; isVisible(): boolean; _markForCheck(): void; message: string; @@ -204,13 +204,11 @@ export abstract class _TooltipComponentBase implements OnDestroy { protected _onShow(): void; show(delay: number): void; protected abstract readonly _showAnimation: string; - _showTimeoutId: number | undefined; abstract _tooltip: ElementRef; tooltipClass: string | string[] | Set | { [key: string]: any; }; _triggerElement: HTMLElement; - _visibility: TooltipVisibility; // (undocumented) static ɵdir: i0.ɵɵDirectiveDeclaration<_TooltipComponentBase, never, never, {}, {}, never, never, false, never>; // (undocumented)