vercel/next.js

Fragment surrounding metatag component breaks scroll behavior

pookmish opened this issue · 0 comments

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/5fqq5c

To Reproduce

  1. start the application
  2. scroll to the bottom of the preview
  3. click the "Bar" link and observe scroll position is at the top. This page contains a metatag inside a <div>
  4. Scroll to the bottom of the preview
  5. 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