adobe/react-spectrum

Table is not interactive on first click in SSR

Open

#8,239 opened on May 15, 2025

View on GitHub
 (17 comments) (5 reactions) (0 assignees)TypeScript (1,500 forks)auto 404
help wantedneeds investigation

Repository metrics

Stars
 (15,634 stars)
PR merge metrics
 (PR metrics pending)

Description

Provide a general summary of the issue here

React Aria's table is not interactive on the first click when the page was loaded through SSR.

🤔 Expected Behavior?

The table should be interactive/hydrated on page load, not only after a user clicked on the page.

😯 Current Behavior

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://github.com/gijsroge/react-aria-table-issue

npm install && npm run dev

On page load you will notice the table is not interactive on the first click, only on the second click.

If you start on page 2: http://localhost:5174/2 and then use the link on this page to navigate to the table using a client side navigation, the table is interactive on first click.

Version

1.8.0

What browsers are you seeing the problem on?

Chrome, Microsoft Edge, Safari, Firefox

If other, please specify.

No response

What operating system are you using?

Windows

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

Contributor guide

Research direction
Investigate the hydration issue in the table component when loaded via SSR. Check if the interaction handler is not attached correctly on the first click. Look at the React Aria table's useTableState or useTable hook for hydration related logic.
Tech stack
reacttypescript
Domain
frontendaccessibility
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactTypeScriptSSR
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75