data-nextjs-scroll-focus-boundary appears multiple times

[BWBama85]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Pro
    Binaries:
      Node: 18.12.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.0.3-canary.2
      eslint-config-next: 13.0.2
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

npm run build on personal server

Describe the Bug

This occurs with npm run dev and npm run build.

data-nextjs-scroll-focus-boundary

Appears multiple times nested when using a component with 'use client'

Expected Behavior

It should only appear once.

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://git.thewilsonnet.com/thewilsonnet/thewilsonnet.com

To Reproduce

Clone repo
npm install
npm run dev or deploy.

Go to /about/resume

Live example: https://thewilsonnet.com/about/resume

[balazsorban44]

Hi, this is currently expected, as each segment introduces its own boundary.

Refer to the docs: https://beta.nextjs.org/docs/routing/linking-and-navigating#focus-and-scroll-management

[trevorpfiz]

Interesting. If I want to have my header stay at the top of the screen what should I do? It does not change on navigation so it is hidden at the top of the screen, and I am scrolled to the element below it that has changed.

[BWBama85]

Interesting. If I want to have my header stay at the top of the screen what should I do? It does not change on navigation so it is hidden at the top of the screen, and I am scrolled to the element below it that has changed.

Right, this is very annoying.

[madeleineostoja]

I think this should be reopened because the current behaviour completely breaks any layout relying on css grid or similar, by nesting an arbitrary number of divs inside the parent.

[birkj]

Found a fix by adding this to my globals.css

@layer base {
  [data-nextjs-scroll-focus-boundary] {
    display: contents;
  }
}

[beckblakestrom]

Similar to @birkj , just added display: contents to the div in global.css

[data-nextjs-scroll-focus-boundary] { display: contents; }

[bradennapier]

This seems like how it should have been implemented from the start, but also may break some of twhat next team is planning to do with advanced routings (definitely will).

I think instead they are going to have to do something like use display: contents on the div then use that to do the focus-trap on the first child box that isn't a focus trap boundary or something

agree though - reminds me of the days before <></> cringe

[danieljpgo]

It was fixed in the last canary

#43717

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.