mantinedev/mantine · error · Error

Popover.Target component children should be an element or a

Error message

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

Popover.Target clones its single child to attach open/close handlers and the floating-ui anchor ref. getSingleElementChild returning null (fragment, primitive, empty children) means there is no anchor element, so it throws rather than rendering a broken popover.

Source

Thrown at packages/@mantine/core/src/components/Popover/PopoverTarget/PopoverTarget.tsx:38

  popupType: 'dialog',
} satisfies Partial<PopoverTargetProps>;

export type PopoverTargetFactory = Factory<{
  props: PopoverTargetProps;
  ref: HTMLElement;
  compound: true;
}>;

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

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

  const forwardedProps: any = others;
  const ctx = usePopoverContext();
  const targetRef = useMergedRef(ctx.reference, getRefProp(child), ref);

  const accessibleProps = ctx.withRoles
    ? {
        'aria-haspopup': popupType,
        'aria-expanded': ctx.opened,
        'aria-controls': ctx.opened ? ctx.getDropdownId() : undefined,
        id: ctx.getTargetId(),
      }
    : {};

  const childProps = child.props as any;

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Use exactly one element child (Button, ActionIcon, Input...)
2. Forward refs in custom trigger components
3. Replace fragments with a single wrapping element

Example fix

// before
<Popover.Target>Details</Popover.Target>

// after
<Popover.Target><Button>Details</Button></Popover.Target>

// Ensure Popover.Target has exactly one element child

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

When it happens

Trigger: Child of Popover.Target is a string/number, fragment, multiple elements, or a component that doesn't forward refs.

Common situations: Custom popover triggers built from styled components without ref forwarding, or text children from quick demos.

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
• ComboboxPopover.Target component children should be an eleme
• HoverCard.Target component children should be an element or

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