[Bug?]: navLink doesn't call onClick before navigating

[razzeee]

What's not working?

NavLink should call onClick, before navigating to the route in to

I want to close a window, before leaving the page, basically.

I stumbled over this again https://github.com/redwoodjs/redwood/pull/2346#issuecomment-1348104484

How do we reproduce the bug?

Here's a repro repo razzeee/redwood-navlink-repro

I would expect this to show up in the logs, if it worked razzeee/redwood-navlink-repro@main/web/src/components/Header/Header.tsx#L35

What's your environment? (If it applies)

No response

Are you interested in working on this?

• [ ] I'm interested in working on this

[jtoar]

@razzeee thanks! I was playing the reproduction a bit. I still haven't gotten to the bottom of it, but if I move NavLink out of all the @headless/ui components, it works again. So there must be something at the intersection of those two that's causing the error.

[razzeee]

Which reminds me of reading https://headlessui.com/react/menu#integrating-with-next-js which might be similar (or not at all)

[razzeee]

Yeah, this tracks, the problem goes away when I do something like this

const MyNavLink = forwardRef(
  (props: any, ref: LegacyRef<HTMLAnchorElement>) => {
    const {
      href,
      children,
      to,
      activeClassName,
      matchSubPaths,
      className,
      ...rest
    } = props
    return (
      <NavLink
        href={href}
        to={to}
        className={className}
        activeClassName={activeClassName}
        matchSubPaths={matchSubPaths}
      >
        <a ref={ref} {...rest}>
          {children}
        </a>
      </NavLink>
    )
  }
)

There are some problems that seem to appear instead with the mouse behavior. But all in all, this probably means, that redwoods navLink isn't forwarding the ref correctly?

[Tobbe]

@razzeee Are you up for creating a PR that fixes the NavLinks?

[razzeee]

@Tobbe I had a look and even tried to find the nextjs change/headlessui reference, but I can't find it. And I'm not seeing what's wrong.

My current non framework side implementation ends up with two nested tags and that breaks styling a bit.

Thanks for trying @razzeee Unfortunately I don't have time to try to reproduce now, but it seems it's only a problem when NavLinks are used together with headless/ui, right?

I'll leave this open, but won't be able to prioritize right now. If more community members run into this and can help with diagnosis someone on the core team can pick this one up.

[razzeee]

I've had another look and I don't know why, but changing the nesting order seems to help.

Basically like https://github.com/tailwindlabs/headlessui/discussions/1965#discussioncomment-4977167 hints at.

It's a bit more weird for disclosures and in parts not working like I would expect it, but it solves the inital problem for me/us.