"onMouseEnter" was passed to <Link> with `href` of `/` but "legacyBehavior" was set

Description

Passing a NextJs Link to Charka Link results in legacyBehaviour set

Link to Reproduction

None

Steps to reproduce

1. Write Code

<NextLink href={navItem.href ?? "#"} passHref>
  <Link
    p={2}
    fontSize={"sm"}
    fontWeight={500}
    color={linkColor}
    _hover={{
      textDecoration: "none",
      color: linkHoverColor,
    }}
  >
    {navItem.label}
  </Link>
</NextLink>;

Chakra UI Version

2.0.0

Browser

Chrome/100.0.4896.127

Operating System

• macOS
• Windows
• Linux

Additional Information

Passing legacyBehavior prop does not solve this issue

[henrychea]

I’ve managed to resolve the issue. It due to the props not being passed. I created a custom component like below

import Link, { LinkProps } from "next/link";
import {
  Link as ChakraLink,
  LinkProps as ChakraLinkProps,
} from "@chakra-ui/react";
import React from "react";

type ChakraLinkAndNextProps = ChakraLinkProps & LinkProps;

const ChakraNextLink = React.forwardRef(({ href, children, ...props } : ChakraLinkAndNextProps, ref : any) => {
  return (
    <Link href={href} passHref>
      <ChakraLink ref={ref} {...props}>
        {children}
      </ChakraLink>
    </Link>
  );
});

export default ChakraNextLink;

[anubra266]

@henrychea could you give more info on the exact issue you have now. Feel free to reopen with a minimal reproduction.