{"record":{"id":"7c31bd8387ac20b3","repo":"mantinedev/mantine","slug":"combobox-target-component-children-should-be-an-el","errorCode":null,"errorMessage":"Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported","messagePattern":"Combobox\\.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/Combobox/ComboboxTarget/ComboboxTarget.tsx","lineNumber":64,"sourceCode":"  compound: true;\n}>;\n\nexport const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.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\n  const targetProps = useComboboxTargetProps({\n    targetType,\n    withAriaAttributes,\n    withKeyboardNavigation,\n    withExpandedAttribute,\n    onKeyDown: (child.props as any).onKeyDown,\n    onClick: (child.props as any).onClick,\n    autoComplete,\n  });\n\n  const clonedElement = cloneElement(child, {\n    ...targetProps,","sourceCodeStart":46,"sourceCodeEnd":82,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx#L46-L82","documentation":"Combobox.Target needs to clone its single child to attach toggle/open handlers and positioning refs. getSingleElementChild returns null for fragments, strings, numbers or empty children, so there is no valid anchor element and the component throws instead of rendering a broken combobox.","triggerScenarios":"Child of Combobox.Target is a string, number, fragment, multiple elements, or nothing; or a child component that does not forward refs.","commonSituations":"Replacing the default Input with a custom control that isn't ref-forwardable, rendering text directly, or accidentally commenting out the child element.","solutions":["Give Combobox.Target exactly one element child (e.g. Input or a button)","Make custom controls forward refs (React.forwardRef or ref prop on function components in React 19)","Avoid fragments/text as direct children"],"exampleFix":"// before\n<Combobox.Target>Choose…</Combobox.Target>\n\n// after\n<Combobox.Target><Input placeholder=\"Choose…\" /></Combobox.Target>","handlingStrategy":"type-guard","validationCode":"// Verify single element child before rendering Combobox.Target with dynamic content","typeGuard":"const isValidTargetChild = (c: React.ReactNode): boolean => isElement(c);","tryCatchPattern":null,"preventionTips":["Use one ref-forwarding element as the target","Wrap text in Button/Input","Add React.forwardRef to custom controls"],"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"}