Next 9 - Assigning a ref to the child of <Link> no longer works

[fmapilis]

Bug report

Describe the bug

In Next 8, the ref attached to an <a> element inside of <Link> was working correctly. With the introduction of intersection observer in Next 9, it looks like this ref is getting overwritten, even with prefetch disabled.

To Reproduce

Here's an example page:

import Link from "next/link";
import { useRef, useEffect } from "react";

const Home = () => {
  const buttonRef = useRef();

  useEffect(() => {
    console.log("buttonRef", buttonRef);
  });

  return (
    <Link href="/">
      <a ref={buttonRef}>click me</a>
    </Link>
  );
};

export default Home;

Steps to reproduce the behavior:

1. Load the page
2. Check the console

Expected behavior

buttonRef.current's value in Next 8 is a reference to the <a> tag. In Next 9, it's undefined.

System information

• Version of Next.js: 9.0.0

Additional context

Not sure if this is an intended breaking change, but would be useful documented if so.

[alexlafroscia]

I'm experiencing this too! Running into it when trying to make a link draggable through react-beautiful-dnd; I have a little wrapper component like this:

const Link = forwardRef(
  ({ children, href, ...rest }, ref) => (
    <NextLink href={href}>
      <a ref={ref} {...rest}>
        {children}
      </a>
    </NextLink>
  )
);

That react-beautiful-dnd is trying to get a reference too. The value of ref seems to be as expected, but react-beautiful-dnd still complains about not being able to find the ref element.

[Emiliano-Bucci]

I'm experiencing this too. Any updates on this? I don't know if this is an intended behavior or not, but i didn't find any docs about this :/

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.