mantinedev/mantine · error · Error

ComboboxPopover.Target component children should be an eleme

Error message

ComboboxPopover.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

ComboboxPopover.Target (used when building fully custom combobox popovers) clones its child to merge positioning refs (useMergedRef(ref, ctx.store.targetRef, getRefProp(child))). If getSingleElementChild finds no single element, there is nothing to attach refs to and it throws.

Source

Thrown at packages/@mantine/core/src/components/ComboboxPopover/ComboboxPopoverTarget.tsx:34

  refProp: 'ref',
} satisfies Partial<ComboboxPopoverTargetProps>;

export type ComboboxPopoverTargetFactory = Factory<{
  props: ComboboxPopoverTargetProps;
  ref: HTMLElement;
  compound: true;
}>;

export const ComboboxPopoverTarget = factory<ComboboxPopoverTargetFactory>((props) => {
  const { children, refProp, ref, ...others } = useProps(
    'ComboboxPopoverTarget',
    defaultProps,
    props
  );

  const child = getSingleElementChild(children);
  if (!child) {
    throw new Error(
      'ComboboxPopover.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 targetRef = useMergedRef(ref, ctx.store.targetRef, getRefProp(child));

  const targetProps = useComboboxTargetProps({
    targetType: 'button',
    withAriaAttributes: true,
    withKeyboardNavigation: true,
    withExpandedAttribute: true,
    onKeyDown: (child.props as any).onKeyDown,
    onClick: (event) => {
      ctx.store.toggleDropdown();
      (child.props as any).onClick?.(event);
    },
    autoComplete: 'off',

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Use a single DOM element or ref-forwarding component as the child
2. Add React.forwardRef to custom target components
3. Remove fragments/multiple children around the target element

Example fix

// before
<ComboboxPopover.Target><>{count > 0 && <Badge/>}<Input/></></ComboboxPopover.Target>

// after
<ComboboxPopover.Target><Input/></ComboboxPopover.Target>

// Pass exactly one element child to ComboboxPopover.Target

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 fragment, string, number, array, or empty children to ComboboxPopover.Target; using a non-ref-forwarding component as the child.

Common situations: Building a custom select with ComboboxPopover API and wrapping the target in a layout fragment, or using a third-party button that doesn't expose a ref.

Related errors

• Combobox.DropdownTarget component children should be an elem
• Combobox.EventsTarget component children should be an elemen
• Combobox.Target component children should be an element or a
• 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/45cb19fdfcca585f. Report an issue: GitHub.