`<Link />` issues with event management/props when used with Base UI

[DavidRouyer]

Which project does this relate to?

Router

Describe the bug

Hi, I'm currently creating an app with TanStack Start and Router, and I want to use the new components from Base UI (https://base-ui.com/).

Base UI, like Radix UI, allows you to do component composition, by remplacing a base component with a custom one.
Naturally, I want to use the <Link /> component to redirect to another page from my menu, like this:

 <Menu.Root>
    <Menu.Trigger>Song</Menu.Trigger>
    <Menu.Portal>
      <Menu.Positioner className="outline-none" sideOffset={8}>
        <Menu.Popup>
          <Menu.Item>Standard item</Menu.Item>
          <Menu.Item
            render={<a href="https://tanstack.com">Standard link</a>}
          />
          <Menu.Item render={<Link to="/about">TanStack link</Link>} />
        </Menu.Popup>
      </Menu.Positioner>
    </Menu.Portal>
  </Menu.Root>

The <Menu> and <Menu.Item> components have a lot of goodies like focus management and keyboard arrow navigation.

It works without issue with the first menu item and the second one (when I replaced the base <Menu.Item /> with a <a href="" />), but it does not when I use a <Link /> component.

It seems like the <Link /> component does interfere with the event management or props passed by the <Menu.Item /> component?

Your Example Website or App

https://stackblitz.com/edit/github-gprc2x45?file=package.json,src%2Froutes%2Findex.tsx,src%2Froutes%2Fabout.tsx

Steps to Reproduce the Bug or Issue

First use case

1. Click on the button named Menu
2. Hover the menu items
3. You should notice only the first and second item are individually focused

Second use case

1. Click on the button named Menu
2. Use keyboard arrows to navigate between
3. You should notice only the first and second item are focusable

Expected behavior

When I pass a <Link /> component to the <Menu.Item /> component, focus management and keyboard arrow navigation should work correctly.

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Edge
• Version: 133.0.3014.0

Additional context

No response

[schiller-manuel]

is this related to this? mui/base-ui#1225

[DavidRouyer]

is this related to this? mui/base-ui#1225

It looks like a specific issue with the Enter key

I posted the issue here because the behavior differs from the native anchor element