{"record":{"id":"dedf97123b12a766","repo":"mantinedev/mantine","slug":"combobox-eventstarget-component-children-should-be","errorCode":null,"errorMessage":"Combobox.EventsTarget component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported","messagePattern":"Combobox\\.EventsTarget 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/ComboboxEventsTarget/ComboboxEventsTarget.tsx","lineNumber":63,"sourceCode":"  compound: true;\n}>;\n\nexport const ComboboxEventsTarget = factory<ComboboxEventsTargetFactory>((props) => {\n  const {\n    children,\n    refProp,\n    withKeyboardNavigation,\n    withAriaAttributes,\n    withExpandedAttribute,\n    targetType,\n    autoComplete,\n    ref,\n    ...others\n  } = useProps('ComboboxEventsTarget', defaultProps, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Combobox.EventsTarget 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 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  return cloneElement(child, {\n    ...targetProps,\n    ...others,","sourceCodeStart":45,"sourceCodeEnd":81,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx#L45-L81","documentation":"Combobox.EventsTarget clones its single child to attach keyboard/focus event handlers and a ref. getSingleElementChild returns null when children is a fragment, primitive, or empty, meaning there is no element to attach behavior to, so the component throws during render.","triggerScenarios":"Passing a string, number, fragment, multiple siblings, or nothing as the child of Combobox.EventsTarget; or a child component that renders null / doesn't accept a ref.","commonSituations":"Using an icon or text directly inside EventsTarget, wrapping input in a fragment for conditional styling, copy-pasting Combobox examples and replacing the Input with a non-forwarding wrapper.","solutions":["Ensure EventsTarget wraps exactly one DOM element or ref-forwarding component (typically Input base)","Remove surrounding fragments or conditionals so a single element remains","Fix custom components to forward refs to their root element"],"exampleFix":"// before\n<Combobox.EventsTarget><>{label}<Input /></></Combobox.EventsTarget>\n\n// after\n<Combobox.EventsTarget><Input {...props} /></Combobox.EventsTarget>","handlingStrategy":"type-guard","validationCode":"// Ensure exactly one element child is passed, e.g. always <Input .../> inside EventsTarget","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":["Keep the default Input as the EventsTarget child","Avoid fragments/conditional wrappers around it","Forward refs in custom inputs"],"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"}