Fix extendedTooltip not shown when defined for a react flow handle

Author: andreas-schultz

CHANGELOG.md

@@ -23,6 +23,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 - `<MultiSelect />`
     - border of the BlueprintJS `Tag` elements were fixed
+- `extendedTooltip` of a handle in the ReactFlow (v12) component does not show the tooltip.
 
 ### Changed
 

src/extensions/react-flow/handles/HandleDefault.tsx

@@ -89,21 +89,15 @@ export const HandleDefault = memo(
             isOpen: extendedTooltipDisplayed,
         };
 
-        const handleContentProps = React.useMemo(
-            () => ({
-                ...data,
-                tooltipProps: {
-                    ...handleContentTooltipProps,
-                    ...data?.tooltipProps,
-                } as TooltipProps,
-            }),
-            [intent, category, handleProps.isConnectable],
-        );
+        const handleContentProps = {
+            ...data,
+            tooltipProps: {
+                ...handleContentTooltipProps,
+                ...data?.tooltipProps,
+            } as TooltipProps,
+        };
 
-        const handleContent = React.useMemo(
-            () => <HandleContent {...handleContentProps}>{children}</HandleContent>,
-            [],
-        );
+        const handleContent = <HandleContent {...handleContentProps}>{children}</HandleContent>;
 
         let switchTooltipTimerOn: ReturnType<typeof setTimeout>;
         let switchToolsTimerOff: ReturnType<typeof setTimeout>;
@@ -119,15 +113,15 @@ export const HandleDefault = memo(
                     if (handleProps.onClick) {
                         handleProps.onClick(e);
                     }
-                    if (toolsTarget.length > 0 && e.target === handleDefaultRef.current) {
+                    if (toolsTarget.length > 0 && e.currentTarget === handleDefaultRef.current) {
                         setExtendedTooltipDisplayed(false);
                         (toolsTarget[0] as HTMLElement).click();
                     }
                 },
                 "data-category": category,
                 onMouseEnter: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
                     if (switchToolsTimerOff) clearTimeout(switchToolsTimerOff);
-                    if (e.target === handleDefaultRef.current) {
+                    if (e.currentTarget === handleDefaultRef.current) {
                         switchTooltipTimerOn = setTimeout(
                             () => setExtendedTooltipDisplayed(true),
                             data?.tooltipProps?.hoverOpenDelay ?? 500,
@@ -142,7 +136,16 @@ export const HandleDefault = memo(
                     setExtendedTooltipDisplayed(false);
                 },
             }),
-            [intent, category, tooltip, handleProps.isConnectable, handleProps.style],
+            [
+                intent,
+                category,
+                tooltip,
+                flowVersionCheck,
+                handleProps.isConnectable,
+                handleProps.style,
+                handleProps.onClick,
+                data?.tooltipProps?.hoverOpenDelay,
+            ],
         );
 
         switch (flowVersionCheck) {