fix(popover): address touch tooltip review

Author: dancormier

packages/stacks-svelte/src/components/Popover/Popover.svelte

@@ -82,7 +82,9 @@
          */
         dismissible?: boolean;
         /**
-         * Whether or not the popover should be an on-hover tooltip
+         * Enables tooltip interactions. Tooltips open on hover for hover-capable devices or keyboard focus,
+         * toggle on touch, and ignore mouse clicks. They close when hover or focus leaves, when touch repeats,
+         * or—when dismissible—on outside interaction or Escape.
          */
         tooltip?: boolean;
         /**

packages/stacks-svelte/src/components/Popover/Popover.test.ts

@@ -1302,6 +1302,16 @@ describe("Popover", () => {
             await tick();
             expect(screen.getByRole("tooltip")).to.exist;
 
+            tap(document.body);
+            await clock.runAllAsync();
+            await tick();
+            expect(screen.queryByRole("tooltip")).not.to.exist;
+
+            tap(button);
+            await clock.runAllAsync();
+            await tick();
+            expect(screen.getByRole("tooltip")).to.exist;
+
             tap(button);
             await clock.runAllAsync();
             await tick();
@@ -1340,6 +1350,42 @@ describe("Popover", () => {
             clock.restore();
         });
 
+        it("should ignore a keyboard click after an aborted touch", async () => {
+            const clock = sinon.useFakeTimers({
+                shouldAdvanceTime: true,
+                shouldClearNativeTimers: true,
+            });
+            stubHoverSupport(false);
+            render(Popover, {
+                props: {
+                    ...defaultProps,
+                    tooltip: true,
+                    children: createSvelteComponentsSnippet([
+                        defaultChildren.reference,
+                        defaultChildren.content,
+                    ]),
+                },
+            });
+
+            const button = screen.getByRole("button");
+            button.dispatchEvent(
+                new PointerEvent("pointerdown", {
+                    bubbles: true,
+                    pointerType: "touch",
+                })
+            );
+            window.dispatchEvent(
+                new PointerEvent("pointerup", { pointerType: "touch" })
+            );
+            await clock.runAllAsync();
+
+            button.click();
+            await clock.runAllAsync();
+            await tick();
+            expect(screen.queryByRole("tooltip")).not.to.exist;
+            clock.restore();
+        });
+
         it("should toggle on touch when the device also supports hover", async () => {
             const clock = sinon.useFakeTimers({
                 shouldAdvanceTime: true,

packages/stacks-svelte/src/components/Popover/PopoverReference.svelte

@@ -77,14 +77,20 @@
         const hoverMedia = window.matchMedia("(hover: hover)");
         let pointerDown = false;
         let pointerType = "";
+        let pointerTypeReset: number;
         const onPointerDown = (event: PointerEvent) => {
+            window.clearTimeout(pointerTypeReset);
             pointerDown = true;
             pointerType = event.pointerType;
         };
         const onPointerUp = () => {
             pointerDown = false;
+            pointerTypeReset = window.setTimeout(() => {
+                pointerType = "";
+            });
         };
         const onPointerCancel = () => {
+            window.clearTimeout(pointerTypeReset);
             pointerDown = false;
             pointerType = "";
         };
@@ -128,6 +134,7 @@
         ref.addEventListener("focusout", pstate.closeTooltip);
         ref.setAttribute("aria-describedby", `${pstate.id}-popover`);
         return () => {
+            window.clearTimeout(pointerTypeReset);
             hoverMedia.removeEventListener("change", onHoverSupportChange);
             ref.removeEventListener("mouseenter", pstate.openTooltip);
             ref.removeEventListener("mouseleave", pstate.closeTooltip);