{"record":{"id":"6b86ad2e6b6eb37f","repo":"mantinedev/mantine","slug":"menu-sub-target-component-children-should-be-an-el","errorCode":null,"errorMessage":"Menu.Sub.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported","messagePattern":"Menu\\.Sub\\.Target component children should be an element or a component that accepts ref\\. Fragments, strings, numbers and other primitive values are not supported","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@mantine/core/src/components/Menu/MenuSubTarget/MenuSubTarget.tsx","lineNumber":15,"sourceCode":"import { isElement } from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useMenuContext } from '../Menu.context';\n\nexport interface MenuSubTargetProps {\n  /** Target element */\n  children: React.ReactNode;\n\n  /** Key of the prop used to get element ref @default 'ref' */\n  refProp?: string;\n}\n\nexport function MenuSubTarget({ children, refProp }: MenuSubTargetProps) {\n  if (!isElement(children)) {\n    throw new Error(\n      'Menu.Sub.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  useMenuContext();\n\n  return (\n    <Popover.Target refProp={refProp} popupType=\"menu\">\n      {children}\n    </Popover.Target>\n  );\n}\n\nMenuSubTarget.displayName = '@mantine/core/MenuSubTarget';\n","sourceCodeStart":1,"sourceCodeEnd":30,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/components/Menu/MenuSubTarget/MenuSubTarget.tsx#L1-L30","documentation":"Menu.Sub.Target clones its child to attach submenu open handlers and a ref (validated with isElement). Fragments, strings, numbers and ref-less components are not valid because the submenu anchor needs a real DOM node.","triggerScenarios":"Child of Menu.Sub.Target is a primitive, fragment, multiple children, or a component that doesn't accept/forward a ref.","commonSituations":"Building nested menus and using a plain label or an icon component as the submenu trigger instead of a Menu item element.","solutions":["Use a proper element such as Menu.Item as the submenu target","Forward refs in custom trigger components","Remove fragments/text so one element child remains"],"exampleFix":"// before\n<Menu.Sub.Target>More…</Menu.Sub.Target>\n\n// after\n<Menu.Sub.Target><Menu.Sub.Item>More…</Menu.Sub.Item></Menu.Sub.Target>","handlingStrategy":"type-guard","validationCode":"// Use a Menu.Sub.Item element as the sole child of Menu.Sub.Target","typeGuard":"const isValidTargetChild = (c: React.ReactNode): boolean => isElement(c);","tryCatchPattern":null,"preventionTips":["Use compound sub-components as targets","Forward refs in custom items","Avoid plain text submenu labels"],"tags":["mantine","react","children-validation","ref","menu"],"backgroundTag":"react-child-must-forward-ref","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}