mantinedev/mantine · error · Error

Combobox.EventsTarget component children should be an elemen

Error message

Combobox.EventsTarget 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.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.

Source

Thrown at packages/@mantine/core/src/components/Combobox/ComboboxEventsTarget/ComboboxEventsTarget.tsx:63

  compound: true;
}>;

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

  const child = getSingleElementChild(children);
  if (!child) {
    throw new Error(
      'Combobox.EventsTarget 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,
  });

  return cloneElement(child, {
    ...targetProps,
    ...others,

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Ensure EventsTarget wraps exactly one DOM element or ref-forwarding component (typically Input base)
2. Remove surrounding fragments or conditionals so a single element remains
3. Fix custom components to forward refs to their root element

Example fix

// before
<Combobox.EventsTarget><>{label}<Input /></></Combobox.EventsTarget>

// after
<Combobox.EventsTarget><Input {...props} /></Combobox.EventsTarget>

// Ensure exactly one element child is passed, e.g. always <Input .../> inside EventsTarget

const hasSingleElementChild = (children: React.ReactNode): boolean =>
  Array.isArray(children)
    ? children.filter(Boolean).length === 1 && isElement(children.find(Boolean))
    : isElement(children);

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• Combobox.DropdownTarget component children should be an elem
• Combobox.Target component children should be an element or a
• ComboboxPopover.Target component children should be an eleme
• HoverCard.Target component children should be an element or
• Menu.ContextMenu component children should be an element or

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