adobe / adobe/react-spectrum

[RAC] Row component with href disappears on hover in Next.js

Open
#8,289 8 comments 0 reactions 0 assignees View on GitHub
bug has workaround
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 **Row** component has an href prop set (to any URL), hovering the mouse cursor over the row causes it to visually disappear from the table.

The row may reappears if the user clicks anywhere on the page or if the page is re-rendered due to navigation.

Probably, this issue seems specific to Next.js environments. I was unable to reproduce this behavior in a simple react-scripts setup with the same component code.

### 🤔 Expected Behavior?

No visual change (if no hover styles are defined).
The row should definitely not disappear.

### 😯 Current Behavior

like this

https://github.com/user-attachments/assets/744625d4-1476-4edd-97ac-ea2244bc348e

with this code
```
'use client';

import { Cell, Column, Row, Table, TableBody, TableHeader } from 'react-aria-components';

export default function Home() {
return (

[col1]
[col2]


[cell1]
[cell2]


[cell1]
[cell2]


[cell1]
[cell2]


[cell1]
[cell2]





);
}
```

### 💁 Possible Solution

no idea...

### 🔦 Context

I came across some similar issues where using a nightly build was suggested as a potential fix. Based on this, I tried react-aria-components version 3.0.0-nightly-77b3442e4-250522, but unfortunately, the behavior still persists. I also tested older stable versions like 1.9.0 and 1.8.0, and the issue was present in those as well.

other related version below
"next": "15.3.1",
"react": "^19.1.0",
"react-aria-components": "3.0.0-nightly-77b3442e4-250522",
"react-dom": "^19.1.0"
or see. https://github.com/nobuhiroYamakado/rac-table-with-href-reproduce/blob/main/package.json

I also tested Row components with an `onAction` event, hoping to use it as a workaround for the `href` issue, but they showed the same disappearing behavior on hover, so this wasn't a viable alternative.

like this
```

[col1]
[col2]


[no href]
[no href]

{}}>
[no href but with onAction]
[no href but with onAction]


[with href]
[with href]





```

Thank you for looking into this! Let me know if any further information is required.

### 🖥️ Steps to Reproduce

1. Clone https://github.com/nobuhiroYamakado/rac-table-with-href-reproduce
2. Install the project dependencies
3. Start the development server (or build and run for production) `npm run dev` or `npm run build` then `npm run start`
5. Open your browser and visit `localhost:3000`
6. Hover your mouse cursor over any of the rows in the table. (Note: The issue often seems most pronounced immediately after a page load or refresh, similar to what is shown in the screen recording.)
7. Observe that the hovered row disappears.

### Version

3.0.0-nightly-77b3442e4-250522 (react-aria-components)

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

Chrome

### If other, please specify.

v1.8.0, v1.9.0 also have the same behavior

### What operating system are you using?

macOS 15.4.1(24E263)for Browser, Debian GNU/Linux 12 (bookworm) for Host

### 🧢 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.