The Menu auto-close behaviour when wrapping a Link

[jarimustonen]

I'm trying to use custom Link component with Menu.Item. The core piece of code looks something like this:

import { Menu } from '@headlessui/react';
import { Link } from "@remix-run/react";

<Menu.Item
    key={item.name}
    as={Link}
    to={item.href}>
    {item.name}
</Menu.Item>

This works fine.

Above this, I'm looking to wrap the Link component with my own component. The wrapping looks something like this:

import { RemixLinkProps } from "@remix-run/react/dist/components";
import { forwardRef } from 'react';


type MyLinkProps = RemixLinkProps & React.RefAttributes<HTMLAnchorElement>;
const MyLink = forwardRef(
    function MyLink({ children, to }: MyLinkProps, ref: React.ForwardedRef<HTMLAnchorElement>) {
        return (
            <Link to={to} ref={ref}>
                {children}
            </Link>
        );
    }
);

I start using the wrapper:

<Menu.Item
    key={item.name}
    as={MyLink}
    to={item.href}>
    {item.name}
</Menu.Item>

At this point, click Menu.Item does not close the menu. Why does this happen? How can I use the Menu.Item with my custom component and also retain the "closability" of the menu in relation to a menu item click?

[jarimustonen]

I managed to resolve this myself. We need to pass the rest of the parameters to the link component:

const MyLink = forwardRef(
    function MyLink({ children, to, ...restProps }: MyLinkProps, ref: React.ForwardedRef<HTMLAnchorElement>) {
        return (
            <Link to={to} ref={ref} { ...restProps }>
                {children}
            </Link>
        );
    }
);

I'm leaving the thread here, in case the powers that be deems this to be worth leaving. Otherwise, please remove this.