<ui-nav-menu> throws an error if <a> tags have extra attributes and causes full page load if events are prevented from propagation

[metatick]

Describe the bug

Tanstack Start's component adds aria attributes to it's <Link> component, which causes App bridge to throw an error, eg. Uncaught Error: Unexpected attributes on <a>: aria-current

Due to this, I replaced this with a simple an component to avoid the error:

function NavMenuItem({ to, children, rel }: { to: string; children: React.ReactNode; rel?: string }) {
  function onClick(e: React.MouseEvent<HTMLAnchorElement>) {
    e.preventDefault();
    e.stopPropagation();
    window.history.pushState({}, '', to);
  }

  return (
    <a href={to} onClick={onClick} rel={rel}>
      {children}
    </a>
  );
}

The above component causes the iframe to be reloaded, due to app bridge calling the internal.navigation.navigate handler, which is unexpected

Expected behaviour

1. <ui-nav-menu> should probably ignore additional attributes on <a> tags
2. app-bridge.js should probably not navigate if it doesn't see an event when a nav menu item is clicked

Contextual information

Packages and versions

List the relevant packages you’re using, and their versions. For example:

• @tanstack/react-router @ 1.132.0
• @tanstack/react-start @ 1.132.0
• app-bridge.js from CDN

Additional context

The issue is that app-bridge.js handles nav menu clicks essentially with something like this:

let defaultPrevented = false
function clickHandler(e){
    defaultPrevented = e.defaultPrevented;
    e.preventDefault()
}

addEventListener("click", clickHandler)
menuItem.click()
removeEventListener("click", clickHandler)

if(defaultPrevented){
  //do nothing
} else {
  //call internal.navigation.navigate via RPC
}

The bug here is that, if clickHandler is never called (eg. due to stopPropagation being called), it defaults to calling internal.navigation.navigate anyway, which is unexpected, for me at least.