{"record":{"id":"4a678f7dbc519d2f","repo":"mantinedev/mantine","slug":"menu-target-component-children-should-be-an-elemen","errorCode":null,"errorMessage":"Menu.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported","messagePattern":"Menu\\.Target 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/MenuTarget/MenuTarget.tsx","lineNumber":23,"sourceCode":"\nexport interface MenuTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop used to get element ref, useful for forwarding refs to custom components @default 'ref' */\n  refProp?: string;\n}\n\nconst defaultProps = {\n  refProp: 'ref',\n} satisfies Partial<MenuTargetProps>;\n\nexport function MenuTarget(props: MenuTargetProps) {\n  const { children, refProp, ...others } = useProps('MenuTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Menu.Target 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 _childProps = child.props as any;\n\n  const onClick = createEventHandler(_childProps.onClick, () => {\n    if (ctx.trigger === 'click') {\n      ctx.toggleDropdown();\n    } else if (ctx.trigger === 'click-hover') {\n      ctx.setOpenedViaClick(true);\n      if (!ctx.opened) {\n        ctx.openDropdown();\n      }\n    }\n  });\n","sourceCodeStart":5,"sourceCodeEnd":41,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/components/Menu/MenuTarget/MenuTarget.tsx#L5-L41","documentation":"Menu.Target clones its single child to attach the toggle click handler and positioning ref. getSingleElementChild returns null for fragments, primitives, or empty children, so the menu would have no anchor; the component throws immediately.","triggerScenarios":"Child of Menu.Target is a string/number, a fragment, multiple elements, or a custom component that does not forward refs.","commonSituations":"Replacing the default button with a custom control lacking ref forwarding, or wrapping the trigger in a fragment for tooltip+menu composition (a classic conflict scenario).","solutions":["Give Menu.Target one element child (Button, ActionIcon, etc.)","Add ref forwarding to custom controls","When combining Tooltip and Menu on the same trigger, nest targets around a single shared element instead of fragments"],"exampleFix":"// before\n<Menu.Target>Options</Menu.Target>\n\n// after\n<Menu.Target><Button>Options</Button></Menu.Target>","handlingStrategy":"type-guard","validationCode":"// Pass exactly one element (Button/ActionIcon) as Menu.Target child","typeGuard":"const isValidTargetChild = (c: React.ReactNode): boolean => isElement(c);","tryCatchPattern":null,"preventionTips":["Wrap custom buttons with forwardRef","Avoid fragment children when combining Tooltip+Menu","Use Mantine Button/ActionIcon as targets"],"tags":["mantine","react","children-validation","ref","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"}