{"record":{"id":"45cb19fdfcca585f","repo":"mantinedev/mantine","slug":"comboboxpopover-target-component-children-should-b","errorCode":null,"errorMessage":"ComboboxPopover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported","messagePattern":"ComboboxPopover\\.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/ComboboxPopover/ComboboxPopoverTarget.tsx","lineNumber":34,"sourceCode":"  refProp: 'ref',\n} satisfies Partial<ComboboxPopoverTargetProps>;\n\nexport type ComboboxPopoverTargetFactory = Factory<{\n  props: ComboboxPopoverTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxPopoverTarget = factory<ComboboxPopoverTargetFactory>((props) => {\n  const { children, refProp, ref, ...others } = useProps(\n    'ComboboxPopoverTarget',\n    defaultProps,\n    props\n  );\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'ComboboxPopover.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 = useComboboxContext();\n  const targetRef = useMergedRef(ref, ctx.store.targetRef, getRefProp(child));\n\n  const targetProps = useComboboxTargetProps({\n    targetType: 'button',\n    withAriaAttributes: true,\n    withKeyboardNavigation: true,\n    withExpandedAttribute: true,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (event) => {\n      ctx.store.toggleDropdown();\n      (child.props as any).onClick?.(event);\n    },\n    autoComplete: 'off',","sourceCodeStart":16,"sourceCodeEnd":52,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/components/ComboboxPopover/ComboboxPopoverTarget.tsx#L16-L52","documentation":"ComboboxPopover.Target (used when building fully custom combobox popovers) clones its child to merge positioning refs (useMergedRef(ref, ctx.store.targetRef, getRefProp(child))). If getSingleElementChild finds no single element, there is nothing to attach refs to and it throws.","triggerScenarios":"Passing a fragment, string, number, array, or empty children to ComboboxPopover.Target; using a non-ref-forwarding component as the child.","commonSituations":"Building a custom select with ComboboxPopover API and wrapping the target in a layout fragment, or using a third-party button that doesn't expose a ref.","solutions":["Use a single DOM element or ref-forwarding component as the child","Add React.forwardRef to custom target components","Remove fragments/multiple children around the target element"],"exampleFix":"// before\n<ComboboxPopover.Target><>{count > 0 && <Badge/>}<Input/></></ComboboxPopover.Target>\n\n// after\n<ComboboxPopover.Target><Input/></ComboboxPopover.Target>","handlingStrategy":"type-guard","validationCode":"// Pass exactly one element child to ComboboxPopover.Target","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":["Use ref-forwarding components as targets","Remove fragments around the target element","Keep custom targets as single DOM-rooted components"],"tags":["mantine","react","children-validation","ref","combobox-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"}