{"record":{"id":"01be477e74b28730","repo":"mantinedev/mantine","slug":"popover-target-component-children-should-be-an-ele","errorCode":null,"errorMessage":"Popover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported","messagePattern":"Popover\\.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/Popover/PopoverTarget/PopoverTarget.tsx","lineNumber":38,"sourceCode":"  popupType: 'dialog',\n} satisfies Partial<PopoverTargetProps>;\n\nexport type PopoverTargetFactory = Factory<{\n  props: PopoverTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const PopoverTarget = factory<PopoverTargetFactory>((props) => {\n  const { children, refProp, popupType, ref, ...others } = useProps(\n    'PopoverTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Popover.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 forwardedProps: any = others;\n  const ctx = usePopoverContext();\n  const targetRef = useMergedRef(ctx.reference, getRefProp(child), ref);\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-haspopup': popupType,\n        'aria-expanded': ctx.opened,\n        'aria-controls': ctx.opened ? ctx.getDropdownId() : undefined,\n        id: ctx.getTargetId(),\n      }\n    : {};\n\n  const childProps = child.props as any;","sourceCodeStart":20,"sourceCodeEnd":56,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/components/Popover/PopoverTarget/PopoverTarget.tsx#L20-L56","documentation":"Popover.Target clones its single child to attach open/close handlers and the floating-ui anchor ref. getSingleElementChild returning null (fragment, primitive, empty children) means there is no anchor element, so it throws rather than rendering a broken popover.","triggerScenarios":"Child of Popover.Target is a string/number, fragment, multiple elements, or a component that doesn't forward refs.","commonSituations":"Custom popover triggers built from styled components without ref forwarding, or text children from quick demos.","solutions":["Use exactly one element child (Button, ActionIcon, Input...)","Forward refs in custom trigger components","Replace fragments with a single wrapping element"],"exampleFix":"// before\n<Popover.Target>Details</Popover.Target>\n\n// after\n<Popover.Target><Button>Details</Button></Popover.Target>","handlingStrategy":"type-guard","validationCode":"// Ensure Popover.Target has exactly one element child","typeGuard":"const isValidTargetChild = (c: React.ReactNode): boolean => isElement(c);","tryCatchPattern":null,"preventionTips":["Use Button/ActionIcon as the target","Add forwardRef to custom triggers","Replace fragments with a single element"],"tags":["mantine","react","children-validation","ref","popover"],"backgroundTag":"react-child-must-forward-ref","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}