From 377ac057ef4cace2dd78ff4c2274c77e75c09688 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 21 Aug 2025 15:28:59 +0200 Subject: [PATCH 1/4] increase delay to prevent swaps for quick and not intended mouse hovers --- src/components/Icon/IconButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Icon/IconButton.tsx b/src/components/Icon/IconButton.tsx index 9be4ca9f2..2325ac13f 100644 --- a/src/components/Icon/IconButton.tsx +++ b/src/components/Icon/IconButton.tsx @@ -50,7 +50,7 @@ export const IconButton = ({ const defaultIconTooltipProps = { hoverOpenDelay: 1000, openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined, - swapPlaceholderDelay: 1, + swapPlaceholderDelay: 10, }; const iconProps = { small: restProps.small, From 512adfd763fe0af8be948872d682ef7dcd425536 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 21 Aug 2025 15:31:52 +0200 Subject: [PATCH 2/4] add check if the hover state is still given before triggering the event --- src/components/Tooltip/Tooltip.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index c2f9629c3..05b70dcd1 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -134,7 +134,10 @@ export const Tooltip = ({ (target as HTMLElement).focus(); break; case "afterhover": - (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true })); + // re-check if the cursor is still over the element after swapping the placeholder before triggering the event to bubble up + (target as HTMLElement).addEventListener("mouseover", () => + (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true })) + ); break; } } From 62ed3bb0863d6321625405fb2bf5ff943067ff0e Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 21 Aug 2025 15:39:48 +0200 Subject: [PATCH 3/4] update changelog --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b04782af..b2ef5367a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - React flow v12: - add missing styles from react flow library to ensure proper functionality of new connection lines +- `` + - re-check hover state after swapping the placeholder before triggering the event bubbling + +## Changed + +- `` + - increase the default delay before swapping the tooltip placeholder of the icon, reducing unwanted swaps because of mouseovers that were not intended ## [24.3.1] - 2025-08-21 From 44aa3c1a18aa3ddddb57dd097fd0f8b2712d2f1d Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 21 Aug 2025 15:48:40 +0200 Subject: [PATCH 4/4] prevent infinite event triggers --- src/components/Tooltip/Tooltip.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 05b70dcd1..b470e96ed 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -135,8 +135,13 @@ export const Tooltip = ({ break; case "afterhover": // re-check if the cursor is still over the element after swapping the placeholder before triggering the event to bubble up - (target as HTMLElement).addEventListener("mouseover", () => - (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true })) + (target as HTMLElement).addEventListener( + "mouseover", + () => (target as HTMLElement).dispatchEvent(new MouseEvent("mouseover", { bubbles: true })), + { + capture: true, + once: true, + } ); break; }