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

[nobuhiroYamakado]

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

rec0522.mp4

with this code

'use client';

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

export default function Home() {
  return (
    <Table>
      <TableHeader>
        <Column isRowHeader={true}>[col1]</Column>
        <Column>[col2]</Column>
      </TableHeader>
      <TableBody>
        <Row href={'http://localhost:3000'}>
          <Cell>[cell1]</Cell>
          <Cell>[cell2]</Cell>
        </Row>
        <Row href={'http://localhost:3000'}>
          <Cell>[cell1]</Cell>
          <Cell>[cell2]</Cell>
        </Row>
        <Row href={'http://localhost:3000'}>
          <Cell>[cell1]</Cell>
          <Cell>[cell2]</Cell>
        </Row>
        <Row href={'http://localhost:3000'}>
          <Cell>[cell1]</Cell>
          <Cell>[cell2]</Cell>
        </Row>
      </TableBody>
    </Table>
  );
}

💁 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

    <Table>
      <TableHeader>
        <Column isRowHeader={true}>[col1]</Column>
        <Column>[col2]</Column>
      </TableHeader>
      <TableBody>
        <Row>
          <Cell>[no href]</Cell>
          <Cell>[no href]</Cell>
        </Row>
        <Row onAction={()=>{}}>
          <Cell>[no href but with onAction]</Cell>
          <Cell>[no href but with onAction]</Cell>
        </Row>
        <Row href={'http://localhost:3000'}>
          <Cell>[with href]</Cell>
          <Cell>[with href]</Cell>
        </Row>
      </TableBody>
    </Table>

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
4. Open your browser and visit localhost:3000
5. 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.)
6. 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

[snowystinger]

Does nextjs have a css reset interfering? What are the styles on the missing row?

[nobuhiroYamakado]

@snowystinger
I've re-confirmed the provided reproduction repository (https://github.com/nobuhiroYamakado/rac-table-with-href-reproduce). The project does not include any custom CSS resets in globals.css , Tailwind CSS Preflight or any other global style sheets. (no globals.css, no Tailwind CSS installed.)

And when a row disappears, the <td> elements are completely removed from the DOM tree in development tools perspective. It's not simply hidden by CSS (like display: none or opacity: 0) I think.

rec2.mov

[reidbarber]

I wasn't able to reproduce this here: https://stackblitz.com/github/nobuhiroYamakado/rac-table-with-href-reproduce

Are you only seeing this in Chrome? And does this still happen if you do a production build?

[nobuhiroYamakado]

@reidbarber

Are you only seeing this in Chrome?

No, this isn't specific to Chrome at least on my laptop. I've tested and can confirm that the same disappearing behavior occurs in:
Firefox 138.0.4 (on aarch64)
Safari 18.4 (20621.1.15.11.10)

does this still happen if you do a production build?

Yes, the issue persists in a production build. I've run next build followed by next start with the provided reproduction repository, and the disappearing behavior on hover still occurs.
Interestingly, I originally encountered this behavior in a production deployment using Next.js's standalone output mode. I've intentionally kept the reproduction repository simpler (without the standalone configuration) to focus on the core issue, which, as confirmed, is present in a standard production build as well.

[nobuhiroYamakado]

I've done some further testing by trying different versions of react-aria-components, react, next.

The disappearing row behavior occurs with RAC versions 1.8.0 and 1.9.0 (and the nightly build I tested previously).
However, the issue does not seem to occur with versions 1.7.0, 1.6.0, and 1.5.0.

So some changes between v1.7.0 and v1.8.0 might be related to this behavior.

For completeness, I also tested with different versions of Next.js(15.1.8, 15.2.5, 15.3.1) and React(18.3.1, 19.1.0) to see if they had any impact, but they did not seem to affect the behavior.

[nobuhiroYamakado]

@reidbarber
@snowystinger

Hi, Following up on my previous comment about version differences, I've bisected RAC versions and found a specific point where the row disappearing behavior on hover (in Next.js) begins:

Versions where the issue DOES NOT occur (Rows behave as expected):

1.7.0
1.7.1
3.0.0-nightly-d21bb3bc5-250311
3.0.0-nightly-74cac946a-250315
3.0.0-nightly-74cac946a-250316
3.0.0-nightly-74cac946a-250317 (Last known good nightly)

Versions where the issue DOES occur (Rows disappear on hover):

3.0.0-nightly-e00dc8373-250318 (First known problematic nightly)
3.0.0-nightly-27e5ef1b7-250319
3.0.0-nightly-4b2c6e76f-250320
3.0.0-nightly-cfe79d329-250401
3.0.0-nightly-58d96cace-250410
1.8.0

The key transition point appears to be between 3.0.0-nightly-74cac946a-250317 (OK) and 3.0.0-nightly-e00dc8373-250318 (NG).
The commits between these two nightly tags seem to primarily involve two PRs:

PR #7948
PR #7912

The description for PR #7912 ("Fix Collection suspense issues") mentions:

fixed this by tracking whether an element is hidden. Hidden elements are kept in our fake DOM, but they are removed from the collection.

This part about tracking hidden elements and removing them from the collection might be related to the behavior I'm seeing.

Could you please take a look at these changes, especially in PR #7912, to see if they might be unintentionally causing this issue in Next.js?
Any help or insights would be greatly appreciated. Thanks!

[snowystinger]

I'm not sure why, but the id's appear to not be stable when generated instead of being provided. When I changed your code to

      <Table aria-label="Table">
        <TableHeader>
          <Column isRowHeader={true}>[col1]</Column>
          <Column>[col2]</Column>
        </TableHeader>
        <TableBody>
          <Row href={'#'} id="row1">
            <Cell>[cell1]</Cell>
            <Cell>[cell2]</Cell>
          </Row>
          <Row href={'#'} id="row2">
            <Cell>[cell1]</Cell>
            <Cell>[cell2]</Cell>
          </Row>
          <Row href={'#'} id="row3">
            <Cell>[cell1]</Cell>
            <Cell>[cell2]</Cell>
          </Row>
          <Row href={'#'} id="row4">
            <Cell>[cell1]</Cell>
            <Cell>[cell2]</Cell>
          </Row>
        </TableBody>
      </Table>

it does not lose the contents of each row. Can you let us know if that works for you for now?

[nobuhiroYamakado]

@snowystinger
Thank you so much!

I've tried adding explicit id props to the Row components as you recommended in both the reproduction repository and my original one, and I can confirm that this resolves the disappearing behavior. The rows are now stable on hover!!!