adobe / adobe/react-spectrum

`Link` does not fire `onClick` / `onPress` when activated via keyboard (Tab + Enter), causing full page reload with third-party routers

Open
#9,868 1 comment 1 reaction 0 assignees View on GitHub
has workaround RAC
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

When a React Aria `Link` is focused via `Tab` and activated via `Enter`, neither `onClick` nor `onPress` is fired. This prevents 3rd-party routers (e.g. TanStack Router) from intercepting navigation and calling `e.preventDefault()`, causing the browser to fall back to native `href` navigation — resulting in a **full page reload** instead of SPA client-side navigation.

Mouse click works correctly: both `onClick` and `onPress` fire as expected.

### 🤔 Expected Behavior?

Pressing `Enter` on a focused `Link` should fire both `onClick` and `onPress`, identical to mouse click behavior.

```tsx
console.log("onClick fired")} // ✅ should fire on keyboard Enter
onPress={() => console.log("onPress fired")} // ✅ should fire on keyboard Enter
>
Development

```

Third-party routers that rely on `onClick` + `e.preventDefault()` (e.g. TanStack Router) should be able to intercept the event and perform client-side navigation without a full page reload.

### 😯 Current Behavior

When the link is activated via **keyboard** (`Tab` to focus → `Enter` to activate):

- `onClick` is **not fired** ❌
- `onPress` is **not fired** ❌
- Browser follows the `href` natively → **full page reload** ❌

When activated via **mouse click**:

- `onClick` fires ✅
- `onPress` fires ✅
- SPA navigation works correctly ✅

This affects both integration approaches documented in TanStack Router's custom link guide:

```tsx
// Approach 1 — createLink()
const CustomLink = createLink(AriaLink);
Development

// Approach 2 — _asChild (internal API)

Development

```

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

**Plain React Aria reproduction (no TSR):**

1. Open: https://stackblitz.com/edit/skmzpfdr?file=src%2FExample.tsx
2. Open the browser console
3. Click a link with the **mouse** → observe `onClick` and `onPress` logged ✅
4. Focus the same link with **Tab** and press **Enter** → observe nothing logged ❌

**With TanStack Router integration:**

1. Open: https://stackblitz.com/edit/vitejs-vite-2xxlupse
2. Click a link with the **mouse** → SPA navigation, no page reload ✅
3. Focus a link with **Tab** and press **Enter** → full page reload ❌

### Version

1.16.0

### What browsers are you seeing the problem on?

Microsoft Edge

### If other, please specify.

_No response_

### What operating system are you using?

Window

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.