adobe / adobe/react-spectrum

Navigation breaks after using button component to navigate and then click to go back to original page.

Open
#7,309 0 comments 0 reactions 0 assignees View on GitHub
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

Using Nextjs with react aria componetns `` component and Firefox. Have a page with a `` that on press fetches a checkout link and then navigates the user to that link (tried with useRouter as well as server side with the nextjs redirect() function). The page navigation works fine but if I navigate back through the browser to the original page, future navigation using the same button or any other Link component is broken and no longer navigates until a page reload.

This issue only specifically happens when using the `` component to trigger some navigation when using Firefox. Does not occur in chrome-based browsers. If I replace the `` with just a regular `` and an onclick and keep everything else the same, the issue does not occur.

This only occurs in firefox.

### 🤔 Expected Behavior?

After clicking the button the navigate to a page, going back to the original page through the back button should take us back to the original page and clicking the button or any other link should navigate successfully.

### 😯 Current Behavior

After clicking the button the navigate to a page, going back to the original page through the back button takes us back to the original page and any page navigation no longer works. Clicking that same button that triggered the original page navigation no longer navigates to a page and any other link clicked no longer navigate to a page.

### 💁 Possible Solution

No other fix other than not using the `` component to trigger any page navigation. Strange that this only happens in firefox and not chrome. I'm guessing it has something to do with the caching that firefox does for page navigation and back navigations. Still, strange that this doesn't seem to be a problem if I trigger the page navigation with a regular button element. This suggests it's a bug when combining both the `` component and firefox.

### 🔦 Context

Had a button that would generate a checkout link and then redirect the user to that checkout link. Worked fine but tried navigating back to the original page and I could no longer navigate to any other page.

### 🖥️ Steps to Reproduce

Sample repo: https://github.com/joncoronel/rac-firefox-bug. Fresh install of nextjs 15 and react aria components.

Link of it deployed: https://rac-firefox-bug.vercel.app/

Only occurs in production. Does not occur in dev mode since an navigation in dev mode reloads the page.

### Version

1.4.1

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

Firefox

### If other, please specify.

_No response_

### What operating system are you using?

Windows 11

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