Protoype a delay on resetting the active state

Shopify · Feb 13, 2025 · 336e040 · 336e040
1 parent 1e4f8cc
commit 336e040
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/.../components/TooltipContent/components/TooltipContentContainer/TooltipContentContainer.tsx b/.../components/TooltipContent/components/TooltipContentContainer/TooltipContentContainer.tsx
@@ -5,7 +5,7 @@ import {
   useTheme,
 } from '@shopify/polaris-viz-core';
 import type {ReactNode} from 'react';
-import {useState} from 'react';
+import {useRef, useState} from 'react';
 
 import {useWatchColorVisionEvents} from '../../../../hooks';
 import {TOOLTIP_BG_OPACITY} from '../../../../constants';
@@ -38,9 +38,21 @@ export function TooltipContentContainer({
 
   const [activeColorVisionIndex, setActiveIndex] = useState(-1);
 
+  const resetTimer = useRef<number>(0);
+
   useWatchColorVisionEvents({
     type: COLOR_VISION_SINGLE_ITEM,
-    onIndexChange: ({detail}) => setActiveIndex(detail.index),
+    onIndexChange: ({detail}) => {
+      window.clearTimeout(resetTimer.current);
+
+      if (detail.index === -1) {
+        resetTimer.current = window.setTimeout(() => {
+          setActiveIndex(-1);
+        }, 300);
+      } else {
+        setActiveIndex(detail.index);
+      }
+    },
     enabled: !ignoreColorVisionEvents,
   });