{"record":{"id":"de3a02c953d96fc7","repo":"mantinedev/mantine","slug":"popover-contextmenu-component-children-should-be-a","errorCode":null,"errorMessage":"Popover.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported","messagePattern":"Popover\\.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/Popover/PopoverContextMenu/PopoverContextMenu.tsx","lineNumber":22,"sourceCode":"import { usePopoverContext } from '../Popover.context';\n\nexport interface PopoverContextMenuProps {\n  /** Element that opens the popover when right-clicked. 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 PopoverContextMenu(props: PopoverContextMenuProps) {\n  const { children, disabled, longPressDelay } = useProps('PopoverContextMenu', null, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Popover.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 = usePopoverContext();\n\n  const handlers = useContextMenuHandlers({\n    childProps: child.props as any,\n    disabled: disabled || ctx.disabled,\n    opened: ctx.opened,\n    longPressDelay,\n    setReference: ctx.reference as unknown as (node: object) => void,\n    open: () => {\n      if (!ctx.opened) {\n        ctx.onToggle();\n      }\n    },\n  });","sourceCodeStart":4,"sourceCodeEnd":40,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/components/Popover/PopoverContextMenu/PopoverContextMenu.tsx#L4-L40","documentation":"Popover.ContextMenu attaches right-click/long-press handlers and a ref to its single child to anchor the popover. If getSingleElementChild finds no single element (fragment, string, number, empty), the handlers have nowhere to bind and the component throws.","triggerScenarios":"Child of Popover.ContextMenu is a primitive, fragment, multiple siblings, or a non-ref-forwarding component; the disabled prop silences behavior but the children check still runs.","commonSituations":"Adding right-click popovers to canvas/table UIs where the target got wrapped in a fragment or a non-forwarding HOC.","solutions":["Pass a single DOM element or ref-forwarding component as the child","Wrap primitives in a span/div","Add React.forwardRef to custom targets"],"exampleFix":"// before\n<Popover.ContextMenu>{label}</Popover.ContextMenu>\n\n// after\n<Popover.ContextMenu><span>{label}</span></Popover.ContextMenu>","handlingStrategy":"type-guard","validationCode":"// Wrap primitives in a span before using them as Popover.ContextMenu child","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":["Forward refs on custom target components","Use DOM-rooted wrappers","Keep one stable child element"],"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"}