fix: debounce legend tooltips

Author: jsilll

src/core/__tests__/chart-core-legend.test.tsx

@@ -92,6 +92,7 @@ const getItem = (index: number, options?: { active?: boolean; dimmed?: boolean }
 const mouseOver = (element: HTMLElement) => element.dispatchEvent(new MouseEvent("mouseover", { bubbles: true }));
 const mouseOut = (element: HTMLElement) => element.dispatchEvent(new MouseEvent("mouseout", { bubbles: true }));
 const mouseLeavePause = () => new Promise((resolve) => setTimeout(resolve, 300));
+const tooltipShowPause = () => new Promise((resolve) => setTimeout(resolve, 350));
 
 describe("CoreChart: legend", () => {
   test("renders no legend when legend.enabled=false", () => {
@@ -378,12 +379,14 @@ describe("CoreChart: legend", () => {
       expect(wrapper.findLegend()!.findItemTooltip()).toBe(null);
 
       act(() => mouseOver(getItem(0).getElement()));
+      await tooltipShowPause();
 
       expect(wrapper.findLegend()!.findItemTooltip()).not.toBe(null);
       expect(wrapper.findLegend()!.findItemTooltip()!.findHeader()!.getElement().textContent).toBe("L1");
 
       act(() => mouseOut(getItem(0).getElement()));
       act(() => mouseOver(getItem(2).getElement()));
+      await tooltipShowPause();
 
       expect(wrapper.findLegend()!.findItemTooltip()).not.toBe(null);
       expect(wrapper.findLegend()!.findItemTooltip()!.findHeader()!.getElement().textContent).toBe("Line 3");
@@ -394,7 +397,7 @@ describe("CoreChart: legend", () => {
       expect(wrapper.findLegend()!.findItemTooltip()).toBe(null);
     });
 
-    test("renders legend tooltip on focus in cartesian chart", () => {
+    test("renders legend tooltip on focus in cartesian chart", async () => {
       const { wrapper } = renderChart({
         highcharts,
         options: {
@@ -412,11 +415,13 @@ describe("CoreChart: legend", () => {
       expect(wrapper.findLegend()!.findItemTooltip()).toBe(null);
 
       act(() => getItem(0).focus());
+      await tooltipShowPause();
 
       expect(wrapper.findLegend()!.findItemTooltip()).not.toBe(null);
       expect(wrapper.findLegend()!.findItemTooltip()!.findHeader()!.getElement().textContent).toBe("L1");
 
       getItem(0).keydown({ keyCode: KeyCode.right });
+      await tooltipShowPause();
 
       expect(wrapper.findLegend()!.findItemTooltip()).not.toBe(null);
       expect(wrapper.findLegend()!.findItemTooltip()!.findHeader()!.getElement().textContent).toBe("L2");
@@ -436,13 +441,15 @@ describe("CoreChart: legend", () => {
       expect(wrapper.findLegend()!.findItemTooltip()).toBe(null);
 
       act(() => mouseOver(getItem(0).getElement()));
+      await tooltipShowPause();
 
       expect(wrapper.findLegend()!.findItemTooltip()).not.toBe(null);
       expect(wrapper.findLegend()!.findItemTooltip()).not.toBe(null);
       expect(wrapper.findLegend()!.findItemTooltip()!.findHeader()!.getElement().textContent).toBe("P1");
 
       act(() => mouseOut(getItem(0).getElement()));
       act(() => mouseOver(getItem(2).getElement()));
+      await tooltipShowPause();
 
       expect(wrapper.findLegend()!.findItemTooltip()).not.toBe(null);
       expect(wrapper.findLegend()!.findItemTooltip()!.findHeader()!.getElement().textContent).toBe("Pie 3");
@@ -453,7 +460,7 @@ describe("CoreChart: legend", () => {
       expect(wrapper.findLegend()!.findItemTooltip()).toBe(null);
     });
 
-    test("renders legend tooltip on focus in pie chart", () => {
+    test("renders legend tooltip on focus in pie chart", async () => {
       const { wrapper } = renderChart({
         highcharts,
         options: { series: series.filter((s) => s.type === "pie") },
@@ -467,11 +474,13 @@ describe("CoreChart: legend", () => {
       expect(wrapper.findLegend()!.findItemTooltip()).toBe(null);
 
       act(() => getItem(0).focus());
+      await tooltipShowPause();
 
       expect(wrapper.findLegend()!.findItemTooltip()).not.toBe(null);
       expect(wrapper.findLegend()!.findItemTooltip()!.findHeader()!.getElement().textContent).toBe("P1");
 
       getItem(0).keydown({ keyCode: KeyCode.right });
+      await tooltipShowPause();
 
       expect(wrapper.findLegend()!.findItemTooltip()).not.toBe(null);
       expect(wrapper.findLegend()!.findItemTooltip()!.findHeader()!.getElement().textContent).toBe("P2");

src/internal/components/chart-legend/index.tsx

@@ -23,6 +23,7 @@ import { GetLegendTooltipContentProps, LegendItem, LegendTooltipContent } from "
 import styles from "./styles.css.js";
 import testClasses from "./test-classes/styles.css.js";
 
+const TOOLTIP_SHOW_DELAY = 300;
 const TOOLTIP_BLUR_DELAY = 50;
 const HIGHLIGHT_LOST_DELAY = 50;
 const SCROLL_DELAY = 100;
@@ -73,7 +74,7 @@ export const ChartLegend = ({
     const control = new DebouncedCall();
     return {
       showTooltip(itemId: string) {
-        control.call(() => setTooltipItemId(itemId));
+        control.call(() => setTooltipItemId(itemId), TOOLTIP_SHOW_DELAY);
       },
       hideTooltip(lock = false) {
         control.call(() => setTooltipItemId(null), TOOLTIP_BLUR_DELAY);