fix(app): preserve static context-menu trigger styles

Passing a static style through a dynamic callback prevented the native press highlight from inheriting the trigger's corners.
This commit is contained in:
Mohamed Boudra
2026-08-17 21:15:17 +02:00
parent 53ba0f0a26
commit 851dcb8d4a
2 changed files with 55 additions and 2 deletions
@@ -0,0 +1,53 @@
import React from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { afterEach, describe, expect, it, vi } from "vitest";
import { ContextMenuTrigger } from "./context-menu";
const captured = vi.hoisted(() => ({
style: undefined as unknown,
}));
vi.mock("react-native", () => ({
Platform: { OS: "web" },
StatusBar: {},
}));
vi.mock("@/constants/platform", () => ({
isNative: false,
isWeb: true,
}));
vi.mock("@/components/ui/menu", () => ({
MenuHint: () => null,
MenuItem: () => null,
MenuLabel: () => null,
MenuRoot: () => null,
MenuSeparator: () => null,
MenuSurface: () => null,
useMenuContext: () => ({
open: false,
setAnchorRect: vi.fn(),
setOpen: vi.fn(),
triggerRef: undefined,
}),
}));
vi.mock("@/components/ui/press-highlight", () => ({
PressHighlight: (props: { style?: unknown }) => {
captured.style = props.style;
return null;
},
}));
afterEach(() => vi.unstubAllGlobals());
describe("ContextMenuTrigger", () => {
it("preserves a static trigger style so the native press highlight can inherit its corners", () => {
vi.stubGlobal("React", React);
const rowStyle = [{ borderRadius: 8 }, { backgroundColor: "#111" }];
renderToStaticMarkup(<ContextMenuTrigger style={rowStyle} />);
expect(captured.style).toBe(rowStyle);
});
});
@@ -178,7 +178,7 @@ export function ContextMenuTrigger({
[onContextMenu, openAtEvent],
);
const pressableStyle = useCallback(
const resolveDynamicStyle = useCallback(
({ pressed, hovered = false }: PressableStateCallbackType & { hovered?: boolean }) => {
if (typeof style === "function") {
return style({ pressed, hovered, open: ctx.open });
@@ -198,7 +198,7 @@ export function ContextMenuTrigger({
onLongPress={handleLongPress}
// @ts-ignore - onContextMenu is web-only and not in RN types.
onContextMenu={handleContextMenu}
style={pressableStyle}
style={typeof style === "function" ? resolveDynamicStyle : style}
highlightStyle={highlightStyle}
>
{children}