diff --git a/packages/elements/src/tooltip/__test__/tooltip.test.js b/packages/elements/src/tooltip/__test__/tooltip.test.js index ecae7cbfcb..bdaf0ef4b5 100644 --- a/packages/elements/src/tooltip/__test__/tooltip.test.js +++ b/packages/elements/src/tooltip/__test__/tooltip.test.js @@ -258,6 +258,7 @@ describe('tooltip/Tooltip', function () { }); await elementUpdated(el); + await nextFrame(); expect(tooltip.opened, 'Tooltip is not opened').to.be.true; @@ -268,6 +269,7 @@ describe('tooltip/Tooltip', function () { }); await elementUpdated(el); + await nextFrame(); expect(tooltip.opened, 'Tooltip is not hidden').to.be.false; }).timeout(MouseMoveDelay * 5); diff --git a/packages/elements/src/tooltip/index.ts b/packages/elements/src/tooltip/index.ts index 2fdca34f72..466d72a765 100644 --- a/packages/elements/src/tooltip/index.ts +++ b/packages/elements/src/tooltip/index.ts @@ -382,20 +382,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(); }; /** @@ -499,7 +491,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 1441b2282c..5454b44f46 100644 --- a/packages/elements/src/tooltip/managers/tooltip-manager.ts +++ b/packages/elements/src/tooltip/managers/tooltip-manager.ts @@ -39,6 +39,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} @@ -58,6 +69,7 @@ class TooltipManager { * @returns {void} */ private onClick = (event: MouseEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ click }) => click(event)); }; @@ -66,6 +78,7 @@ class TooltipManager { * @returns {void} */ private onMouseOut = (event: MouseEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ mouseout }) => mouseout(event)); }; @@ -74,6 +87,7 @@ class TooltipManager { * @returns {void} */ private onMouseLeave = (event: MouseEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ mouseleave }) => mouseleave(event)); }; @@ -82,6 +96,7 @@ class TooltipManager { * @returns {void} */ private onWheel = (event: WheelEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ wheel }) => wheel(event)); }; @@ -90,6 +105,7 @@ class TooltipManager { * @returns {void} */ private onKeyDown = (event: KeyboardEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ keydown }) => keydown(event)); }; @@ -98,6 +114,7 @@ class TooltipManager { * @returns {void} */ private onBlur = (event: FocusEvent): void => { + this.cancelThrottler(); this.registry.forEach(({ blur }) => blur(event)); };