improve(ContextMenu): allow trigger pointer-events to be overwritten (#1790)

Author: huntabyte

.changeset/ten-ears-cross.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+improve(ContextMenu): allow users to override `pointer-events` style on `ContextMenu.Trigger`

packages/bits-ui/src/lib/bits/context-menu/components/context-menu-trigger.svelte

@@ -24,7 +24,14 @@
 	});
 
 	const mergedProps = $derived(
-		mergeProps(restProps, triggerState.props, { style: { pointerEvents: "auto" } })
+		mergeProps(
+			restProps,
+			triggerState.props,
+			{ style: { pointerEvents: "auto" } },
+			{
+				style: restProps.style,
+			}
+		)
 	);
 </script>
 

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

@@ -11,6 +11,7 @@
 		portalProps?: Omit<ContextMenu.PortalProps, "children" | "child">;
 		subTriggerProps?: Omit<ContextMenu.SubTriggerProps, "children" | "child">;
 		checkboxGroupProps?: Omit<ContextMenu.CheckboxGroupProps, "children" | "child" | "value">;
+		triggerProps?: Omit<ContextMenu.TriggerProps, "children" | "child">;
 		openFocusOverride?: boolean;
 	};
 </script>
@@ -28,6 +29,7 @@
 		subTriggerProps = {},
 		checkboxGroupProps = {},
 		openFocusOverride = false,
+		triggerProps = {},
 		...restProps
 	}: ContextMenuTestProps = $props();
 </script>
@@ -41,6 +43,7 @@
 				class="h-[500px] w-[500px]"
 				aria-expanded={undefined}
 				aria-controls={undefined}
+				{...triggerProps}
 			>
 				open
 			</ContextMenu.Trigger>

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

@@ -469,3 +469,12 @@ it("should open nested context menus", async () => {
 	await expectExists(page.getByTestId("nested-content"));
 	await expectExists(page.getByTestId("content"));
 });
+
+it("should allow overriding the pointer events style", async () => {
+	setup({ triggerProps: { style: { pointerEvents: undefined } } });
+	const trigger = page.getByTestId("trigger");
+	await trigger.click({ button: "right" });
+	await expectExists(page.getByTestId("content"));
+	await trigger.click({ button: "right", force: true });
+	await expectNotExists(page.getByTestId("content"));
+});