mantinedev/mantine · error · Error

Combobox.Target component children should be an element or a

Error message

Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported

What it means

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.

Source

Thrown at packages/@mantine/core/src/components/Combobox/ComboboxTarget/ComboboxTarget.tsx:64

  compound: true;
}>;

export const ComboboxTarget = factory<ComboboxTargetFactory>((props) => {
  const {
    children,
    refProp,
    withKeyboardNavigation,
    withAriaAttributes,
    withExpandedAttribute,
    targetType,
    autoComplete,
    ref,
    ...others
  } = useProps('ComboboxTarget', defaultProps, props);

  const child = getSingleElementChild(children);
  if (!child) {
    throw new Error(
      'Combobox.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'
    );
  }

  const ctx = useComboboxContext();

  const targetProps = useComboboxTargetProps({
    targetType,
    withAriaAttributes,
    withKeyboardNavigation,
    withExpandedAttribute,
    onKeyDown: (child.props as any).onKeyDown,
    onClick: (child.props as any).onClick,
    autoComplete,
  });

  const clonedElement = cloneElement(child, {
    ...targetProps,

View on GitHub (pinned to 8a284e2c2c)

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

Example fix

// before
<Combobox.Target>Choose…</Combobox.Target>

// after
<Combobox.Target><Input placeholder="Choose…" /></Combobox.Target>

Defensive patterns

Strategy: type-guard

Validate before calling

// Verify single element child before rendering Combobox.Target with dynamic content

Type guard

const isValidTargetChild = (c: React.ReactNode): boolean => isElement(c);

Prevention

Use one ref-forwarding element as the target
Wrap text in Button/Input
Add React.forwardRef to custom controls

When it happens

Trigger: Child of Combobox.Target is a string, number, fragment, multiple elements, or nothing; or a child component that does not forward refs.

Common situations: Replacing the default Input with a custom control that isn't ref-forwardable, rendering text directly, or accidentally commenting out the child element.

Related errors

AI-assisted analysis of mantinedev/mantine@8a284e2c2c (2026-08-28). Data as JSON: /api/errors/7c31bd8387ac20b3. Report an issue: GitHub.