diff --git a/packages/elements/src/tooltip/__test__/tooltip.test.js b/packages/elements/src/tooltip/__test__/tooltip.test.js index 6f4bda40a7..d4cf587c5f 100644 --- a/packages/elements/src/tooltip/__test__/tooltip.test.js +++ b/packages/elements/src/tooltip/__test__/tooltip.test.js @@ -265,6 +265,7 @@ describe('tooltip/Tooltip', function () { }); await elementUpdated(el); + await nextFrame(); expect(tooltip.opened, 'Tooltip is not opened').to.be.true; @@ -275,6 +276,7 @@ describe('tooltip/Tooltip', function () { }); await elementUpdated(el); + await nextFrame(); expect(tooltip.opened, 'Tooltip is not hidden').to.be.false; }).timeout(MouseMoveDelay * 2); diff --git a/packages/elements/src/tooltip/index.ts b/packages/elements/src/tooltip/index.ts index 7a08bfebb1..a5ae04055d 100644 --- a/packages/elements/src/tooltip/index.ts +++ b/packages/elements/src/tooltip/index.ts @@ -390,20 +390,12 @@ class Tooltip extends BasicElement { * Hide tooltip * @returns {void} */ - private hideTooltip(): void { + private resetTooltip = (): void => { this.reset(); this.matchTarget = null; this.matchTargetRect = null; this.positionTarget = null; this.setOpened(false); - } - - /** - * Reset tooltip - * @returns {void} - */ - private resetTooltip = (): void => { - this.hideTooltip(); }; /** @@ -507,7 +499,7 @@ class Tooltip extends BasicElement { */ private onClick = (): void => { this.clicked = true; - this.hideTooltip(); + this.resetTooltip(); }; /** diff --git a/packages/elements/src/tooltip/managers/tooltip-manager.ts b/packages/elements/src/tooltip/managers/tooltip-manager.ts index 6d0500d40f..3354ebb821 100644 --- a/packages/elements/src/tooltip/managers/tooltip-manager.ts +++ b/packages/elements/src/tooltip/managers/tooltip-manager.ts @@ -40,6 +40,17 @@ class TooltipManager { } } + /** + * Cancel the pending task of throttled mousemove event listener. + * This prevents the task from running out of order compared to the event dispatching sequence + * due to its setTimeout usage. + * Any event listener hiding the tooltip should call this method. + * @returns {void} + */ + private cancelThrottler() { + this.titleThrottler.task?.cancel(); + } + /** * @param event Mouse move event * @returns {void} @@ -59,6 +70,7 @@ class TooltipManager { * @returns {void} */ private onClick = (event: MouseEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ click }) => click(event)); }; @@ -67,6 +79,7 @@ class TooltipManager { * @returns {void} */ private onMouseOut = (event: MouseEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ mouseout }) => mouseout(event)); }; @@ -75,6 +88,7 @@ class TooltipManager { * @returns {void} */ private onMouseLeave = (event: MouseEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ mouseleave }) => mouseleave(event)); }; @@ -83,6 +97,7 @@ class TooltipManager { * @returns {void} */ private onWheel = (event: WheelEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ wheel }) => wheel(event)); }; @@ -91,6 +106,7 @@ class TooltipManager { * @returns {void} */ private onKeyDown = (event: KeyboardEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ keydown }) => keydown(event)); }; @@ -99,6 +115,7 @@ class TooltipManager { * @returns {void} */ private onBlur = (event: FocusEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ blur }) => blur(event)); };