fix(ContextMenu): not opening under certain conditions

Author: huntabyte

.changeset/short-spiders-decide.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix(ContextMenu): not opening under certain conditions

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

@@ -49,9 +49,9 @@ import { DOMTypeahead } from "$lib/internal/dom-typeahead.svelte.js";
 import { RovingFocusGroup } from "$lib/internal/roving-focus-group.js";
 import { GraceArea } from "$lib/internal/grace-area.svelte.js";
 import { OpenChangeComplete } from "$lib/internal/open-change-complete.js";
-import { getTopMostDismissableLayer } from "../utilities/dismissible-layer/use-dismissable-layer.svelte.js";
 
 export const CONTEXT_MENU_TRIGGER_ATTR = "data-context-menu-trigger";
+export const CONTEXT_MENU_CONTENT_ATTR = "data-context-menu-content";
 
 const MenuRootContext = new Context<MenuRootState>("Menu.Root");
 const MenuMenuContext = new Context<MenuMenuState>("Menu.Root | Menu.Sub");
@@ -1177,20 +1177,6 @@ export class ContextMenuTriggerState {
 	oncontextmenu(e: BitsMouseEvent) {
 		if (e.defaultPrevented || this.opts.disabled.current) return;
 
-		const topMostLayer = getTopMostDismissableLayer();
-
-		if (topMostLayer) {
-			const topLayerRef = topMostLayer[0].opts.ref.current;
-			const topLayerRefContainsTrigger = topLayerRef?.contains(this.opts.ref.current);
-
-			if (
-				!topLayerRefContainsTrigger &&
-				!topLayerRef?.hasAttribute?.("data-context-menu-content")
-			) {
-				return;
-			}
-		}
-
 		this.#clearLongPressTimer();
 		this.#handleOpen(e);
 		e.preventDefault();

packages/bits-ui/src/lib/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.ts

@@ -14,8 +14,12 @@ import { type EventCallback } from "$lib/internal/events.js";
 import { debounce } from "$lib/internal/debounce.js";
 import { noop } from "$lib/internal/noop.js";
 import { getOwnerDocument, isOrContainsTarget } from "$lib/internal/elements.js";
-import { isElement } from "$lib/internal/is.js";
+import { isElementOrSVGElement } from "$lib/internal/is.js";
 import { isClickTrulyOutside } from "$lib/internal/dom.js";
+import {
+	CONTEXT_MENU_CONTENT_ATTR,
+	CONTEXT_MENU_TRIGGER_ATTR,
+} from "$lib/bits/menu/menu.svelte.js";
 
 globalThis.bitsDismissableLayers ??= new Map<
 	DismissibleLayerState,
@@ -246,9 +250,15 @@ function isResponsibleLayer(node: HTMLElement): boolean {
 }
 
 function isValidEvent(e: PointerEvent, node: HTMLElement): boolean {
-	if ("button" in e && e.button > 0) return false;
 	const target = e.target;
-	if (!isElement(target)) return false;
+	if (!isElementOrSVGElement(target)) return false;
+
+	const targetIsContextMenuTrigger = Boolean(target.closest(`[${CONTEXT_MENU_TRIGGER_ATTR}]`));
+	if ("button" in e && e.button > 0 && !targetIsContextMenuTrigger) return false;
+
+	const nodeIsContextMenu = Boolean(node.closest(`[${CONTEXT_MENU_CONTENT_ATTR}]`));
+	if (targetIsContextMenuTrigger && nodeIsContextMenu) return false;
+
 	const ownerDocument = getOwnerDocument(target);
 	const isValid =
 		ownerDocument.documentElement.contains(target) &&

tests/src/tests/context-menu/context-menu-tooltip-test.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Tooltip, ContextMenu } from "bits-ui";
+</script>
+
+<Tooltip.Provider>
+	<Tooltip.Root delayDuration={0}>
+		<Tooltip.Trigger data-testid="tooltip-trigger">
+			<ContextMenu.Root>
+				<ContextMenu.Trigger data-testid="context-menu-trigger"
+					>Right click me</ContextMenu.Trigger
+				>
+				<ContextMenu.Portal>
+					<ContextMenu.Content data-testid="context-menu-content">
+						<ContextMenu.Item>Item1</ContextMenu.Item>
+						<ContextMenu.Item>Item2</ContextMenu.Item>
+					</ContextMenu.Content>
+				</ContextMenu.Portal>
+			</ContextMenu.Root>
+		</Tooltip.Trigger>
+		<Tooltip.Content data-testid="tooltip-content">Tooltip content</Tooltip.Content>
+	</Tooltip.Root>
+</Tooltip.Provider>

tests/src/tests/context-menu/context-menu.browser.test.ts

@@ -9,6 +9,7 @@ import ContextMenuForceMountTest from "./context-menu-force-mount-test.svelte";
 import { expectExists, expectNotExists } from "../browser-utils";
 import ContextMenuIntegrationTest from "./context-menu-integration-test.svelte";
 import ContextMenuNestedTest from "./context-menu-nested-test.svelte";
+import ContextMenuTooltipTest from "./context-menu-tooltip-test.svelte";
 
 const kbd = getTestKbd();
 
@@ -428,16 +429,6 @@ it("calls `onValueChange` when the value of the checkbox group changes", async (
 	expect(onValueChange).toHaveBeenCalledWith(["2"]);
 });
 
-it("should not open when right-clicked while another floating layer is open that is not a context menu", async () => {
-	render(ContextMenuIntegrationTest);
-	await page.getByTestId("dropdown-trigger").click();
-	const dropdownContent = page.getByTestId("dropdown-content");
-	await expectExists(dropdownContent);
-	await page.getByTestId("context-trigger-1").click({ button: "right" });
-	await expectNotExists(page.getByTestId("context-content-1"));
-	await expectExists(dropdownContent);
-});
-
 it("should allow switching between context menus via right-click", async () => {
 	render(ContextMenuIntegrationTest);
 	await page.getByTestId("context-trigger-1").click({ button: "right" });
@@ -476,3 +467,11 @@ it("should allow overriding the pointer events style", async () => {
 	await trigger.click({ button: "right", force: true });
 	await expectNotExists(page.getByTestId("content"));
 });
+
+it("should open when right clicked inside a tooltip trigger", async () => {
+	render(ContextMenuTooltipTest);
+
+	await page.getByTestId("tooltip-trigger").hover();
+	await page.getByTestId("context-menu-trigger").click({ button: "right" });
+	await expectExists(page.getByTestId("context-menu-content"));
+});