Autocomplete: Meta/Ctrl+Enter on menu items with href opens link in same tab instead of new tab when using virtual focus

[jsefiani]

Provide a general summary of the issue here

When using the Autocomplete component with Menu items that have href attributes, pressing Meta+Enter (macOS) or Ctrl+Enter (Windows) does not respect the native browser behavior of opening links in a new tab. This issue only occurs when navigating to menu items using virtual focus (arrow keys from the input field), but works correctly when tabbing directly to menu items.

🤔 Expected Behavior?

When a user presses Meta+Enter (Cmd+Enter on Mac) or Ctrl+Enter (Windows) on a focused menu item with an href attribute, the link should open in a new browser tab, matching native browser behavior for links.
This should work consistently whether the menu item is focused via:

• Virtual focus (arrow keys from input)
• Direct focus (Tab key)

😯 Current Behavior

When navigating to a menu item using arrow keys from the input field and pressing Meta+Enter or Ctrl+Enter, the link opens in the same tab instead of a new tab.

However, when tabbing directly to the menu item and pressing Meta+Enter or Ctrl+Enter, the link correctly opens in a new tab.

This behavior affects:

• Menu items with native href attributes
• Menu items using external routers (e.g., Tanstack Router)

💁 Possible Solution

The issue is in the useAutocomplete hook at packages/@react-aria/autocomplete/src/useAutocomplete.ts (around line 314).

When the Enter key is pressed on a virtually focused menu item, the code calls item?.click(), which creates a programmatic click event without preserving the keyboard modifier keys:

case 'Enter':
  if (focusedNodeId != null) {
    let item = document.getElementById(focusedNodeId);
    item?.click();  // Loses modifier keys
  }
  break;

Proposed fix:
Use the openLink utility (which properly handles modifier keys) when the item is an anchor element:

case 'Enter':
  if (focusedNodeId != null) {
    let item = document.getElementById(focusedNodeId);
    // If the item is a link, use openLink to preserve modifier keys
    if (item instanceof HTMLAnchorElement && item.href) {
      openLink(item, e.nativeEvent);
    } else if (item) {
      item.click();
    }
  }
  break;

🔦 Context

No response

🖥️ Steps to Reproduce

I created a quick example where you can easily reproduce the issue: https://stackblitz.com/edit/tanstack-router-m5tec7wq?file=src%2Froutes%2Findex.tsx

Steps to reproduce:

1. Press Meta key + K to open command palette
2. Press Arrow down key
3. Press Meta key + Enter to open link in a new tab

Version

1.13.0 (react-aria-components)

What browsers are you seeing the problem on?

Microsoft Edge, Chrome

If other, please specify.

No response

What operating system are you using?

macOS Sequoia 15.5

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response