Getting reference warning on @mantine/core/box

[tender notch]

Hi! I am building an nested menu. And I am facing this error, is this related with the library or just newbie mistake?

This is the warning:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of @mantine/core/Box.
at SubCategory (webpack-internal:///./components/Structure/Menu/Menu.tsx:18:26)
at eval (webpack-internal:///./node_modules/@mantine/core/esm/Box/Box.js:45:18)
at eval (webpack-internal:///./node_modules/@mantine/core/esm/Menu/MenuItem/MenuItem.js:55:87)
at div
....

[pale ocean]

Seems like you are trying to use <Menu ref={ref} />, it is not supported

[tender notch]

Hmm but I am not adding the ref to the menu :/

export function CategoriesMenu() {
    const {classes} = useStyles();
    const { categories } = useGlobalContext();
    const items = categories?.map((link) => {
        const dropdownItems = link.subCategories?.map((item) => {
            if (item.subCategories) {
                return <Menu.Item key={item.id} component={SubCategory} category={item} />
            }
            return <Menu.Item key={item.id} className={classes.link}>{item.name}</Menu.Item>
        });
        if (dropdownItems) {
            return (
                <Menu
                    key={link.id}
                    offset={-1}
                    trigger="hover"
                    transitionProps={{exitDuration: 1}}
                    radius={0}
                >
                    <Menu.Target>
                        <a
                            href={`/${link.name}`}
                            className={classes.link}
                            onClick={(event) => event.preventDefault()}
                        >
                            <span className={classes.linkLabel}>{link.name}</span>
                            <IconChevronDown size="0.9rem" stroke={3}/>
                        </a>
                    </Menu.Target>
                    <Menu.Dropdown className={classes.dropdown}>{dropdownItems}</Menu.Dropdown>
                </Menu>
            );
        }
        return (
            <a
                key={link.id}
                href={`/${link.name}`}
                onClick={(event) => event.preventDefault()}
            >
                {link.name}
            </a>
        );
    });
    return (
        <Box>
            <Header height={MENU_HEIGHT} px="md">
                <Group position="center" sx={{height: '100%'}}>
                    <Group sx={{height: '100%'}} spacing={0} className={classes.hiddenMobile}>
                        {items}
                    </Group>
                </Group>
            </Header>
        </Box>
    );
}

function SubCategory({category }: { category: CategoryDTO }) {
    const { classes } = useStyles();

    const dropdownItems = category?.subCategories?.map((item) => {
        if (item.subCategories && item.subCategories.length > 0) {
            return <Menu.Item key={item.id} component={SubCategory} category={item} />
        } else {
            return <Menu.Item key={item.id} className={classes.link}>{item.name}</Menu.Item>
        }
    });

    if (dropdownItems) {
        return (
            <Menu
                key={category.id}
                offset={4}
                trigger="hover"
                transitionProps={{exitDuration: 1}}
                radius={0}
                position="right-start"
            >
                <Menu.Target>
                    <a
                        href={`/${category.name}`}
                        className={classes.link}
                        onClick={(event) => event.preventDefault()}
                        style={{ height: MENU_HEIGHT }}
                    >
                        <span className={classes.linkLabel}>{category.name}</span>
                        <IconChevronRight size="0.9rem" stroke={3}/>
                    </a>
                </Menu.Target>
                <Menu.Dropdown className={classes.dropdown}>{dropdownItems}</Menu.Dropdown>
            </Menu>
        );
    }
    return (
        <a
            key={category.id}
            href={`/${category.name}`}
            className={classes.link}
            onClick={(event) => event.preventDefault()}
        >
            {category.name}
        </a>
    );
}

[pale ocean]

Can you send a sandbox that reproduces the issue?

[tender notch]

https://codesandbox.io/s/box-ref-warning-forked-tpgxl3

When I over the menu item I get the error on console

[pale ocean]

It does not run for some reason, please use the template – https://codesandbox.io/s/mantine-template-9ze89?file=/src/App.tsx

[tender notch]

What about now?
https://codesandbox.io/s/peaceful-oskar-mrf73j

[pale ocean]

The issue is on this line – <Menu.Item key={item.id} component={SubCategory} category={item} />

You attach Menu to SubCategory component which is built without forwardRef

[tender notch]

I need to add forwardRef in SubCategory in order to fix this?