{"record":{"id":"12adc8e33cf799ff","repo":"mantinedev/mantine","slug":"menu-contextmenu-component-children-should-be-an-e","errorCode":null,"errorMessage":"Menu.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported","messagePattern":"Menu\\.ContextMenu component children should be an element or a component that accepts ref\\. Fragments, strings, numbers and other primitive values are not supported","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@mantine/core/src/components/Menu/MenuContextMenu/MenuContextMenu.tsx","lineNumber":23,"sourceCode":"import { useMenuContext } from '../Menu.context';\n\nexport interface MenuContextMenuProps {\n  /** Element that opens the menu when right-clicked. Menu dropdown is positioned at the cursor. The trigger element must not call `event.preventDefault()` in its own `onContextMenu` handler, otherwise the native context menu is not suppressed. */\n  children: React.ReactNode;\n\n  /** If set, the right-click trigger is disabled and the browser's default context menu is shown */\n  disabled?: boolean;\n\n  /** Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default */\n  longPressDelay?: number;\n}\n\nexport function MenuContextMenu(props: MenuContextMenuProps) {\n  const { children, disabled, longPressDelay } = useProps('MenuContextMenu', null, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Menu.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = useMenuContext();\n  const popoverCtx = usePopoverContext();\n\n  const handlers = useContextMenuHandlers({\n    childProps: child.props as any,\n    disabled: disabled || popoverCtx.disabled,\n    opened: ctx.opened,\n    longPressDelay,\n    setReference: popoverCtx.reference as unknown as (node: object) => void,\n    open: () => ctx.openDropdown(),\n  });\n\n  return cloneElement(child, handlers as any);\n}","sourceCodeStart":5,"sourceCodeEnd":41,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/components/Menu/MenuContextMenu/MenuContextMenu.tsx#L5-L41","documentation":"Menu.ContextMenu attaches long-press/contextmenu handlers and a ref to its single child so a menu can open on right-click/long-press. If getSingleElementChild finds no single element (fragment, string, number, empty), there is nothing to bind to and it throws.","triggerScenarios":"Child of Menu.ContextMenu is a fragment, primitive, multiple siblings, or a non-ref-forwarding component. Also note this component must sit inside Menu/Popover context, otherwise a context error follows.","commonSituations":"Making table rows or list items context-menu targets but wrapping them in fragments, or passing text directly as the trigger.","solutions":["Pass exactly one element (e.g. the row/list item component) as the child","Ensure that component forwards refs to its root DOM node","Avoid conditional fragments around the target element"],"exampleFix":"// before\n<Menu.ContextMenu><>{item.name}</></Menu.ContextMenu>\n\n// after\n<Menu.ContextMenu><TableRow>{item.name}</TableRow></Menu.ContextMenu>","handlingStrategy":"type-guard","validationCode":"// Ensure Menu.ContextMenu wraps exactly one ref-forwarding element (e.g. the row component)","typeGuard":"const hasSingleElementChild = (children: React.ReactNode): boolean =>\n  Array.isArray(children)\n    ? children.filter(Boolean).length === 1 && isElement(children.find(Boolean))\n    : isElement(children);","tryCatchPattern":null,"preventionTips":["Make row/list components forward refs","Avoid fragment wrappers around context targets","Keep Menu.ContextMode setup inside Menu/Popover parents"],"tags":["mantine","react","children-validation","ref","context-menu"],"backgroundTag":"react-child-must-forward-ref","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}