Adding a click handler with addEventListener to an anchor inside a Link breaks Link

[trusktr]

Bug report

Describe the bug

I want to

If some React component is like the following,

export default () => ({
  <Link>
    <a href="/foo" className="foo"></a>
  </Link>
})

then in some other file I want to do

document.querySelector('a.foo')
  .addEventListener('click', () => doSomething())

but this breaks the Link behavior, and causes the page to do a full refresh instead of changing routes.

I do not have access to (it is very complicated to supply) onClick handler inside the other component. I need to do it simply, with the imperative DOM API.

Expected behavior

How do we add a click handler imperatively without breaking the Link?

System information

• OS: macOS
• Version of Next.js: 6.1.1

[timneutkens]

Can you create a minimal repository for this, I wonder if we should even support this, I'm guessing it's just a React vs DOM api thing instead of a real issue with Next.js, but I can have a look.

[trusktr]

Do you happen to have a CodeSandbox or StackBlitz starter? Those are easier to work with. It's worth making one, and leave the link in the issue template for people to fork.

[timneutkens]

They don't support Next.js, you could try repl.it, but you could also push up a repository like everyone else 😄

[trusktr]

Heeeeeeeey, look! https://repl.it/site/languages/nextjs

[timneutkens]

That's just the landing page haha, I knew they support Next.js, hence why I mentioned it.

[trusktr]

Cool. I'll use that to make a repro when I circle back.