mantinedev/mantine · error · Error

Combobox.DropdownTarget component children should be an elem

Error message

Combobox.DropdownTarget 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.DropdownTarget clones its single child and attaches a ref (via Popover.Target) so floating-ui can anchor the dropdown. isElement(children) is false for fragments, strings, numbers, arrays, or components that don't forward refs, so none of that works and the component throws immediately during render.

Source

Thrown at packages/@mantine/core/src/components/Combobox/ComboboxDropdownTarget/ComboboxDropdownTarget.tsx:32

const defaultProps = {
  refProp: 'ref',
} satisfies Partial<ComboboxDropdownTargetProps>;

export type ComboboxDropdownTargetFactory = Factory<{
  props: ComboboxDropdownTargetProps;
  ref: HTMLElement;
  compound: true;
}>;

export const ComboboxDropdownTarget = factory<ComboboxDropdownTargetFactory>((props) => {
  const { children, refProp, ref } = useProps('ComboboxDropdownTarget', defaultProps, props);

  // Context not used, just to throw error if used outside of Combobox
  useComboboxContext();

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

  return (
    <Popover.Target ref={ref} refProp={refProp}>
      {children}
    </Popover.Target>
  );
});

ComboboxDropdownTarget.displayName = '@mantine/core/ComboboxDropdownTarget';

View on GitHub (pinned to 8a284e2c2c)

Solutions

Wrap text/primitives in a DOM element (<Combobox.DropdownTarget><button>Label</button></Combobox.DropdownTarget>)
If using a custom component, make it forward its ref to the root DOM node
Remove fragments/multiple children so there is exactly one element child

Example fix

// before
<Combobox.DropdownTarget>Submit</Combobox.DropdownTarget>

// after
<Combobox.DropdownTarget><Button>Submit</Button></Combobox.DropdownTarget>

Defensive patterns

Strategy: type-guard

Validate before calling

import { isElement } from '@mantine/core';

if (!isElement(children)) {
  // render a fallback wrapper element instead
}

Type guard

import { isElement } from '@mantine/core';

const isValidTarget = (children: React.ReactNode): boolean => isElement(children);

Prevention

Always wrap one DOM element or ref-forwarding component in DropdownTarget
Never pass strings/fragments as the direct child
Add React.forwardRef to custom triggers

When it happens

Trigger: Passing a string (<Combobox.DropdownTarget>Label</Combobox.DropdownTarget>), a fragment (<>{...}</>), multiple children, or a custom component that doesn't forward refs as the sole child of Combobox.DropdownTarget.

Common situations: Wrapping the target in a styled wrapper that doesn't use forwardRef, rendering conditional fragments, or text children copied from a quick prototype.

Related errors

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