Fragment surrounding metatag component breaks scroll behavior
pookmish opened this issue · 0 comments
pookmish commented
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/5fqq5c
To Reproduce
- start the application
- scroll to the bottom of the preview
- click the "Bar" link and observe scroll position is at the top. This page contains a metatag inside a
<div>
- Scroll to the bottom of the preview
- click the "Foo" link and observe scroll position is still at the bottom. This page contains a metatag inside a fragement
<>
Current vs. Expected behavior
Using React 19's metatag behaviors, it is expected that the scroll position would be at the top for both "Foo" and "Bar" pages. The position of a metatag inside a fragment should not alter the scroll position behavior when navigating between pages.
ie.
<>
<title>Foo</title>
<h1>Foo</h1>
</>
breaks the scroll, while the below scrolls appropriately.
<div>
<title>Bar</title>
<h1>Bar</h1>
</div>
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP PREEMPT_DYNAMIC Sun Aug 6 20:05:33 UTC 2023
Available memory (MB): 4102
Available CPU cores: 2
Binaries:
Node: 20.12.0
npm: 10.5.0
Yarn: 1.22.19
pnpm: 8.15.6
Relevant Packages:
next: 15.1.1-canary.6 // Latest available version is detected (15.1.1-canary.6).
eslint-config-next: 15.0.3
react: 18.3.1
react-dom: 18.3.1
typescript: 5.7.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Navigation
Which stage(s) are affected? (Select all that apply)
next dev (local), next start (local), Vercel (Deployed)
Additional context
No response