{"record":{"id":"ad19025e560436e6","repo":"mantinedev/mantine","slug":"combobox-dropdowntarget-component-children-should","errorCode":null,"errorMessage":"Combobox.DropdownTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported","messagePattern":"Combobox\\.DropdownTarget 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/Combobox/ComboboxDropdownTarget/ComboboxDropdownTarget.tsx","lineNumber":32,"sourceCode":"\nconst defaultProps = {\n  refProp: 'ref',\n} satisfies Partial<ComboboxDropdownTargetProps>;\n\nexport type ComboboxDropdownTargetFactory = Factory<{\n  props: ComboboxDropdownTargetProps;\n  ref: HTMLElement;\n  compound: true;\n}>;\n\nexport const ComboboxDropdownTarget = factory<ComboboxDropdownTargetFactory>((props) => {\n  const { children, refProp, ref } = useProps('ComboboxDropdownTarget', defaultProps, props);\n\n  // Context not used, just to throw error if used outside of Combobox\n  useComboboxContext();\n\n  if (!isElement(children)) {\n    throw new Error(\n      'Combobox.DropdownTarget 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  return (\n    <Popover.Target ref={ref} refProp={refProp}>\n      {children}\n    </Popover.Target>\n  );\n});\n\nComboboxDropdownTarget.displayName = '@mantine/core/ComboboxDropdownTarget';\n","sourceCodeStart":14,"sourceCodeEnd":45,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/components/Combobox/ComboboxDropdownTarget/ComboboxDropdownTarget.tsx#L14-L45","documentation":"Combobox.DropdownTarget clones its single child and attaches a ref (via Popover.Target) so floating-ui can anchor the dropdown. isElement(children) is false for fragments, strings, numbers, arrays, or components that don't forward refs, so none of that works and the component throws immediately during render.","triggerScenarios":"Passing a string (<Combobox.DropdownTarget>Label</Combobox.DropdownTarget>), a fragment (<>{...}</>), multiple children, or a custom component that doesn't forward refs as the sole child of Combobox.DropdownTarget.","commonSituations":"Wrapping the target in a styled wrapper that doesn't use forwardRef, rendering conditional fragments, or text children copied from a quick prototype.","solutions":["Wrap text/primitives in a DOM element (<Combobox.DropdownTarget><button>Label</button></Combobox.DropdownTarget>)","If using a custom component, make it forward its ref to the root DOM node","Remove fragments/multiple children so there is exactly one element child"],"exampleFix":"// before\n<Combobox.DropdownTarget>Submit</Combobox.DropdownTarget>\n\n// after\n<Combobox.DropdownTarget><Button>Submit</Button></Combobox.DropdownTarget>","handlingStrategy":"type-guard","validationCode":"import { isElement } from '@mantine/core';\n\nif (!isElement(children)) {\n  // render a fallback wrapper element instead\n}","typeGuard":"import { isElement } from '@mantine/core';\n\nconst isValidTarget = (children: React.ReactNode): boolean => isElement(children);","tryCatchPattern":null,"preventionTips":["Always wrap one DOM element or ref-forwarding component in DropdownTarget","Never pass strings/fragments as the direct child","Add React.forwardRef to custom triggers"],"tags":["mantine","react","children-validation","ref","combobox"],"backgroundTag":"react-child-must-forward-ref","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}