fix(Popover): openOnHover trigger click behavior (#1921)

Author: huntabyte

.changeset/mean-groups-drum.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(Popover): openOnHover trigger click while open behavior

docs/package.json

@@ -7,7 +7,7 @@
 	"scripts": {
 		"dev": "pnpm --reporter append-only --color \"/dev:/\"",
 		"dev:content": "velite dev --watch",
-		"dev:svelte": "svelte-kit sync && vite dev",
+		"dev:svelte": "svelte-kit sync && vite dev --port 5177",
 		"dev:demos": "pnpm build:demos",
 		"build": "pnpm build:content && pnpm build:search && pnpm build:demos && vite build && pnpm build:llms && vite build",
 		"build:llms": "pnpx tsx ./other/build-llms-txt.ts",

packages/bits-ui/src/lib/bits/popover/popover.svelte.ts

@@ -53,6 +53,7 @@ export class PopoverRootState {
 	// hover tracking state
 	openedViaHover = $state(false);
 	hasInteractedWithContent = $state(false);
+	hoverCooldown = $state(false);
 	closeDelay = $state(0);
 	#closeTimeout: number | null = null;
 	#domContext: DOMContext | null = null;
@@ -221,7 +222,7 @@ export class PopoverTriggerState {
 		this.#clearCloseTimeout();
 		this.root.cancelDelayedClose();
 
-		if (this.root.opts.open.current) return;
+		if (this.root.opts.open.current || this.root.hoverCooldown) return;
 
 		const delay = this.opts.openDelay.current;
 		if (delay <= 0) {
@@ -241,6 +242,7 @@ export class PopoverTriggerState {
 
 		this.#isHovering = false;
 		this.#clearOpenTimeout();
+		this.root.hoverCooldown = false;
 
 		// let GraceArea handle the close - it will call handleHoverClose via onPointerExit
 		// we just need to stop any pending open timer
@@ -259,6 +261,17 @@ export class PopoverTriggerState {
 			return;
 		}
 
+		// if closing while hovering with openOnHover enabled, set cooldown to prevent
+		// immediate re-open via hover
+		if (this.#isHovering && this.opts.openOnHover.current && this.root.opts.open.current) {
+			this.root.hoverCooldown = true;
+		}
+
+		// if clicking to open while in cooldown, reset cooldown (explicit open)
+		if (this.root.hoverCooldown && !this.root.opts.open.current) {
+			this.root.hoverCooldown = false;
+		}
+
 		this.root.toggleOpen();
 	}
 

tests/src/tests/popover/popover.browser.test.ts

@@ -522,6 +522,68 @@ describe("openOnHover", () => {
 		// should still be open
 		await expectExists(t.getContent());
 	});
+
+	it("should close on second click and not reopen immediately via hover", async () => {
+		const t = setupHover({ triggerProps: { openOnHover: true, openDelay: 0, closeDelay: 0 } });
+
+		// hover opens
+		await t.trigger.hover();
+		await expectExists(t.getContent());
+
+		// first click converts to click-based
+		await t.trigger.click();
+		await expectExists(t.getContent());
+
+		// second click closes
+		await t.trigger.click();
+		await expectNotExists(t.getContent());
+
+		// should not reopen via hover while mouse is still over trigger
+		await new Promise((r) => setTimeout(r, 50));
+		await expectNotExists(t.getContent());
+	});
+
+	it("should allow hover reopen after leaving and re-entering trigger", async () => {
+		const t = setupHover({ triggerProps: { openOnHover: true, openDelay: 0, closeDelay: 0 } });
+
+		// hover opens
+		await t.trigger.hover();
+		await expectExists(t.getContent());
+
+		// first click converts
+		await t.trigger.click();
+		await expectExists(t.getContent());
+
+		// second click closes
+		await t.trigger.click();
+		await expectNotExists(t.getContent());
+
+		// leave trigger
+		await page.getByTestId("outside").hover();
+
+		// re-enter trigger - hover should work again
+		await t.trigger.hover();
+		await expectExists(t.getContent());
+	});
+
+	it("should allow click to explicitly reopen while in cooldown", async () => {
+		const t = setupHover({ triggerProps: { openOnHover: true, openDelay: 0, closeDelay: 0 } });
+
+		// hover opens
+		await t.trigger.hover();
+		await expectExists(t.getContent());
+
+		// first click converts
+		await t.trigger.click();
+
+		// second click closes
+		await t.trigger.click();
+		await expectNotExists(t.getContent());
+
+		// third click should explicitly reopen
+		await t.trigger.click();
+		await expectExists(t.getContent());
+	});
 });
 
 describe("openOnHover with forceMount", () => {
@@ -770,4 +832,72 @@ describe("openOnHover with forceMount", () => {
 		// should still be open
 		await expectExists(t.getContent());
 	});
+
+	it("should close on second click and not reopen immediately via hover", async () => {
+		const t = setupForceMountHover({
+			triggerProps: { openOnHover: true, openDelay: 0, closeDelay: 0 },
+		});
+
+		// hover opens
+		await t.trigger.hover();
+		await expectExists(t.getContent());
+
+		// first click converts to click-based
+		await t.trigger.click();
+		await expectExists(t.getContent());
+
+		// second click closes
+		await t.trigger.click();
+		await expectNotExists(t.getContent());
+
+		// should not reopen via hover while mouse is still over trigger
+		await new Promise((r) => setTimeout(r, 50));
+		await expectNotExists(t.getContent());
+	});
+
+	it("should allow hover reopen after leaving and re-entering trigger", async () => {
+		const t = setupForceMountHover({
+			triggerProps: { openOnHover: true, openDelay: 0, closeDelay: 0 },
+		});
+
+		// hover opens
+		await t.trigger.hover();
+		await expectExists(t.getContent());
+
+		// first click converts
+		await t.trigger.click();
+		await expectExists(t.getContent());
+
+		// second click closes
+		await t.trigger.click();
+		await expectNotExists(t.getContent());
+
+		// leave trigger
+		await t.getOutside().hover();
+
+		// re-enter trigger - hover should work again
+		await t.trigger.hover();
+		await expectExists(t.getContent());
+	});
+
+	it("should allow click to explicitly reopen while in cooldown", async () => {
+		const t = setupForceMountHover({
+			triggerProps: { openOnHover: true, openDelay: 0, closeDelay: 0 },
+		});
+
+		// hover opens
+		await t.trigger.hover();
+		await expectExists(t.getContent());
+
+		// first click converts
+		await t.trigger.click();
+
+		// second click closes
+		await t.trigger.click();
+		await expectNotExists(t.getContent());
+
+		// third click should explicitly reopen
+		await t.trigger.click();
+		await expectExists(t.getContent());
+	});
 });