fix event dispatching and extend tests on it for focus by keyboard navigation

Author: haschek

src/components/Tooltip/Tooltip.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import "@testing-library/jest-dom";
 
@@ -45,19 +46,53 @@ describe("Tooltip", () => {
         fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper--placeholder`)[0]);
         checkForPlaceholderClass(container, 1);
         await waitFor(() => {
-            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
             checkForPlaceholderClass(container, 0);
         });
+        expect(screen.queryAllByText(TooltipStory.args.content as string)).toHaveLength(0);
     });
     it("should be displayed on two continues mouse hover when placeholder is used", async () => {
         const { container } = render(<Tooltip {...TooltipStory.args} usePlaceholder={true} />);
         fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
         checkForPlaceholderClass(container, 1);
-        await waitFor(async () => {
-            expect(screen.queryAllByText(TooltipStory.args.content)).toHaveLength(0);
+        await waitFor(() => {
+            checkForPlaceholderClass(container, 0);
+        });
+        expect(screen.queryAllByText(TooltipStory.args.content as string)).toHaveLength(0);
+        fireEvent.mouseEnter(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
+    });
+    it("should be displayed on focus when no placeholder is used", async () => {
+        // Blueprint ignores focus events with null relatedTarget (page-refocus guard), so we tab
+        // from a preceding element to produce a non-null relatedTarget.
+        render(
+            <>
+                <button>previous element</button>
+                <Tooltip {...TooltipStory.args} usePlaceholder={false} />
+            </>
+        );
+        const user = userEvent.setup();
+        await user.tab(); // focuses "previous element"
+        await user.tab(); // focuses tooltip target, relatedTarget is non-null → Blueprint opens
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
+    });
+    it("should be displayed after keyboard focus when placeholder is used", async () => {
+        // Use a focusable button child so refocus() can call .focus() on it after the swap.
+        // Tab from a preceding element so relatedTarget is non-null when Blueprint handles focus.
+        const { container } = render(
+            <>
+                <button>previous element</button>
+                <Tooltip {...TooltipStory.args} usePlaceholder={true}>
+                    <button>tooltip target</button>
+                </Tooltip>
+            </>
+        );
+        const user = userEvent.setup();
+        await user.tab(); // focuses "previous element"
+        await user.tab(); // focuses placeholder inner button, triggers focusin swap
+        checkForPlaceholderClass(container, 1);
+        await waitFor(() => {
             checkForPlaceholderClass(container, 0);
-            fireEvent.mouseOver(container.getElementsByClassName(`${eccgui}-tooltip__wrapper`)[0]);
-            expect(await screen.findByText(TooltipStory.args.content)).toBeVisible();
         });
+        expect(await screen.findByText(TooltipStory.args.content as string)).toBeVisible();
     });
 });

src/components/Tooltip/Tooltip.tsx

@@ -50,7 +50,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     swapPlaceholderDelay?: number;
 }
 
-export type TooltipSize = "small" | "medium" | "large"
+export type TooltipSize = "small" | "medium" | "large";
 
 export const Tooltip = ({
     children,
@@ -100,16 +100,19 @@ export const Tooltip = ({
                 }, swapDelayTime);
                 if (placeholderRef.current !== null) {
                     const eventType = ev.type === "focusin" ? "focusout" : "mouseleave";
-                    const innerFocusTarget = (placeholderRef.current as HTMLElement).querySelector("[tabindex='0']")?.children[0];
-                    (innerFocusTarget as HTMLElement).addEventListener(eventType, () => {
-                        if (
-                            (eventType === "focusout" && eventMemory.current === "afterfocus") ||
-                            (eventType === "mouseleave" && eventMemory.current === "afterhover")
-                        ) {
-                            eventMemory.current = null;
-                        }
-                        clearTimeout(swapDelay.current as NodeJS.Timeout);
-                    });
+                    const innerFocusTarget = (placeholderRef.current as HTMLElement).querySelector("[tabindex='0']")
+                        ?.children[0];
+                    if (innerFocusTarget) {
+                        (innerFocusTarget as HTMLElement).addEventListener(eventType, () => {
+                            if (
+                                (eventType === "focusout" && eventMemory.current === "afterfocus") ||
+                                (eventType === "mouseleave" && eventMemory.current === "afterhover")
+                            ) {
+                                eventMemory.current = null;
+                            }
+                            clearTimeout(swapDelay.current as NodeJS.Timeout);
+                        });
+                    }
                 }
             };
             (placeholderRef.current as HTMLElement).addEventListener("mouseenter", swap);