From 09110712d978e7efa2b9caafccc6d9953fff3e65 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 5 Aug 2025 14:58:17 +0200 Subject: [PATCH 1/7] add explicit property to set delay before swapping the placeholder element --- src/components/Tooltip/Tooltip.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index cf319bff9..0ba0540c0 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -42,6 +42,10 @@ export interface TooltipProps extends Omit { * You can prevent it in any case by setting it to `false`. */ usePlaceholder?: boolean; + /** + * Time after the placeholder element is replaced by the actual tooltip component. Must be greater than 0. + */ + swapPlaceholderDelay?: number; } export const Tooltip = ({ @@ -53,18 +57,20 @@ export const Tooltip = ({ markdownEnabler = "\n\n", markdownProps, usePlaceholder, + swapPlaceholderDelay = 100, hoverOpenDelay = 500, ...otherTooltipProps }: TooltipProps) => { const placeholderRef = React.useRef(null); const eventMemory = React.useRef(null); const searchId = React.useRef(null); - const swapDelayTime = 100; + const swapDelayTime = swapPlaceholderDelay; const [placeholder, setPlaceholder] = React.useState( !otherTooltipProps.disabled && !otherTooltipProps.defaultIsOpen && !otherTooltipProps.isOpen && otherTooltipProps.renderTarget === undefined && + swapDelayTime > 0 && hoverOpenDelay > swapDelayTime && (usePlaceholder === true || (typeof content === "string" && usePlaceholder !== false)) ); @@ -166,7 +172,9 @@ export const Tooltip = ({ ) : ( 0 && hoverOpenDelay > swapDelayTime ? hoverOpenDelay - swapDelayTime : hoverOpenDelay + } {...otherTooltipProps} content={tooltipContent} className={targetClassName} From 88f68e1c2fc1db3f3acdca5681bc5647247c4dc5 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 5 Aug 2025 14:59:09 +0200 Subject: [PATCH 2/7] use minimal swap time as default --- src/components/Icon/IconButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Icon/IconButton.tsx b/src/components/Icon/IconButton.tsx index e14fff5e2..9be4ca9f2 100644 --- a/src/components/Icon/IconButton.tsx +++ b/src/components/Icon/IconButton.tsx @@ -50,6 +50,7 @@ export const IconButton = ({ const defaultIconTooltipProps = { hoverOpenDelay: 1000, openOnTargetFocus: restProps.disabled || (restProps.tabIndex ?? 0) < 0 ? false : undefined, + swapPlaceholderDelay: 1, }; const iconProps = { small: restProps.small, From cc3e52d14be7ca70273a6e4e1b38d4e66fc904ff Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 5 Aug 2025 17:22:15 +0200 Subject: [PATCH 3/7] prevent that flow drag action removes a click action on a menu element --- src/extensions/react-flow/nodes/NodeContent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index 776f28535..ed2e46d53 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -668,7 +668,7 @@ export function NodeContent({ )} {(menuButtons || (showExecutionButtons && executionButtons)) && ( -
+
{showExecutionButtons && typeof executionButtons === "function" ? executionButtons(adjustedContentProps, setAdjustedContentProps) : null} From 48bf477a882a25676465bdfe2e2906674ee68be9 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Tue, 5 Aug 2025 17:23:48 +0200 Subject: [PATCH 4/7] prevent infering event processes, only use latest one --- src/components/Tooltip/Tooltip.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 0ba0540c0..7e3b80220 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -64,6 +64,7 @@ export const Tooltip = ({ const placeholderRef = React.useRef(null); const eventMemory = React.useRef(null); const searchId = React.useRef(null); + const swapDelay = React.useRef(null); const swapDelayTime = swapPlaceholderDelay; const [placeholder, setPlaceholder] = React.useState( !otherTooltipProps.disabled && @@ -83,7 +84,10 @@ export const Tooltip = ({ React.useEffect(() => { if (placeholderRef.current !== null) { const swap = (ev: MouseEvent | globalThis.FocusEvent) => { - const swapDelay = setTimeout(() => { + if (swapDelay.current) { + clearTimeout(swapDelay.current); + } + swapDelay.current = setTimeout(() => { // we delay the swap to prevent unwanted effects // (e.g. forced mouseover after the swap but the cursor is already somewhere else) eventMemory.current = ev.type === "focusin" ? "afterfocus" : "afterhover"; @@ -99,7 +103,7 @@ export const Tooltip = ({ ) { eventMemory.current = null; } - clearTimeout(swapDelay); + clearTimeout(swapDelay.current as NodeJS.Timeout); }); } }; From 409475abe4c6652eb7d5eaef63de1fa8ba745841 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Wed, 6 Aug 2025 15:45:38 +0200 Subject: [PATCH 5/7] update changelog --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4f0d096ae..8b0f21d08 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,13 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ### Added - Extended existing height and readOnly props from `CodeEditorProps` to `AutoSuggestionProps` & `ExtendedCodeEditorProps` to be configurable from `` +- `` + - `swapPlaceholderDelay` property to allow configuration of the delay time before the laceholder element is replaced by the actual tooltip component + +### Changed + +- `` + - prevent start of a react flow drag action of a node when user clicks in the node menu section ## [24.3.0] - 2025-06-05 From 3ca570543e7fadfdfeab739dfa4c01f4a91c8c28 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 7 Aug 2025 10:03:21 +0200 Subject: [PATCH 6/7] fix typo --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 259882e57..72941be24 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,7 +12,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `` - `additionalActions` property to include other more complex components between the action buttons and the context menu of the widget - `` - - `swapPlaceholderDelay` property to allow configuration of the delay time before the laceholder element is replaced by the actual tooltip component + - `swapPlaceholderDelay` property to allow configuration of the delay time before the placeholder element is replaced by the actual tooltip component ### Changed From 2b0cf163dc21cc5ee45d7b59f2217148be549d80 Mon Sep 17 00:00:00 2001 From: Michael Haschke Date: Thu, 7 Aug 2025 10:04:47 +0200 Subject: [PATCH 7/7] decide to use a longer opening delay for the first time and use a tradeoff for the default values --- src/components/Tooltip/Tooltip.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx index 7e3b80220..c2f9629c3 100644 --- a/src/components/Tooltip/Tooltip.tsx +++ b/src/components/Tooltip/Tooltip.tsx @@ -43,7 +43,9 @@ export interface TooltipProps extends Omit { */ usePlaceholder?: boolean; /** - * Time after the placeholder element is replaced by the actual tooltip component. Must be greater than 0. + * Time after the placeholder element is replaced by the actual tooltip component. + * Must be greater than 0. + * For the first display of the tooltip this time adds up to `hoverOpenDelay`. */ swapPlaceholderDelay?: number; } @@ -58,7 +60,7 @@ export const Tooltip = ({ markdownProps, usePlaceholder, swapPlaceholderDelay = 100, - hoverOpenDelay = 500, + hoverOpenDelay = 450, ...otherTooltipProps }: TooltipProps) => { const placeholderRef = React.useRef(null); @@ -176,9 +178,7 @@ export const Tooltip = ({ ) : ( 0 && hoverOpenDelay > swapDelayTime ? hoverOpenDelay - swapDelayTime : hoverOpenDelay - } + hoverOpenDelay={hoverOpenDelay} {...otherTooltipProps} content={tooltipContent} className={targetClassName}