Dialog open warning in latest nextjs version: 13.4.19

[eriknyk]

I just got this wanring after update nextjs to latest version 13.4.19 prior update I had 13.4.9 and this warning hasn't throwing.

This warn is displayed each time when dialog is open.

I'm opening the dialog using props + state as following:

<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
  ...

layout-router.js:113 Skipping auto-scroll behavior due to `position: sticky` or `position: fixed` on element: 

<header class=​"supports-backdrop-blur:​bg-background/​60 sticky top-0 z-40 w-full border-b backdrop-blur bg-mainbar-background" data-aria-hidden=​"true" aria-hidden=​"true">​…​</header>​ 
    at commitLayoutEffectOnFiber (webpack-internal:///(app-pages-browser)
    ...

Regards.

[hongz1]

I don't use this UI tools but reached to here because I googled 'Skipping auto-scroll behavior due to position: sticky or position: fixed on element' message.

My NextJS app has root 'loading.js' and it has a splash logo screen rendered. Problem I found was that I did router.push (next/navigation) without scroll option.

https://nextjs.org/docs/app/api-reference/functions/use-router router.push(href: string, { scroll: boolean }): Perform a client-side navigation to the provided route. Adds a new entry into the browser’s history stack.

router.replace(href: string, { scroll: boolean }): Perform a client-side navigation to the provided route without adding a new entry into the browser’s history stack.

so I did adding scroll option to 'false' and that warning message was gone. router.replace('/auth/login', { scroll: false });

hopefully this might help.

[eriknyk]

Hi @hongz1 I wasn't using router.replace(...) I'm using tag <Link href="..."/> however I've noticed that Link tag has a scroll prop also, then tried <Link href="https://a-link" scroll={false}> and worked the warn disappeared. Thanks a lot!

[ctjlewis]

Thank you @eriknyk! scroll={false} does solve the problem.

[ffan0811]

Edit: I moved the the fixed header inside the <main> element and the warning was gone.

---

What If I don't wanna use the scroll={false} ? I have a fixed header and i think this causes the warning, Skipping auto-scroll behavior due to `position: sticky` or `position: fixed...

For most of my cases, I want the auto-scroll whenever page is redirected to another page but with the scroll={false}, I can't have the feature. What do I do in this case?

[WPaczula]

I'd like to reset my page scroll on each page change via links. How can I achieve that now having a sticky element on the page?

[jasperfirecai2]

I had this issue only on a specific page. Even when the dialog wasn't shown. My dialog was a direct child of my main element which has flex:grow enabled. When I wrapped the page inside a div inside the main element, the warning went away. Hope that helps some other folks where scroll={false} didnt do the trick

[sonyarianto]

I had this issue only on a specific page. Even when the dialog wasn't shown. My dialog was a direct child of my main element which has flex:grow enabled. When I wrapped the page inside a div inside the main element, the warning went away. Hope that helps some other folks where scroll={false} didnt do the trick

this is I think the best solution, just wrap the things that contains sticky or fixed with a div (or something else) above it (or on the main component) and we don't need the scroll={false} things.

[hoomanramin]

I fixed it with a simple solution. With the routes that ends to these component you should add scroll false. <Link href={link} scroll={false}> Your Text</Link>

[DMZTdhruv]

Hi @hongz1 I wasn't using router.replace(...) I'm using tag <Link href="..."/> however I've noticed that Link tag has a scroll prop also, then tried <Link href="https://a-link" scroll={false}> and worked the warn disappeared. Thanks a lot!

Hey bro thank you so much. I was trying to remake a post modal same like instagram and whenever the modal opened the scroll would go up of the body and when I closed the modal the scroll would retain it's position. I didn't liked that behavior but by using false on scroll in <Link /> that helped me fixed this issue thanks!!!! and also thanks to @hongz1 for bringing scroll prop idea!

[tomferez]

But why is it casting a warning? Can someone explain?

[eriknyk]

@ffan0811

Edit: I moved the the fixed header inside the <main> element and the warning was gone.

What If I don't wanna use the scroll={false} ? I have a fixed header and i think this causes the warning, Skipping auto-scroll behavior due to `position: sticky` or `position: fixed...

For most of my cases, I want the auto-scroll whenever page is redirected to another page but with the scroll={false}, I can't have the feature. What do I do in this case?

What you said make sense, I've moved the fixed header inside < main > tag, hoever the warn still happening any idea?

[eriknyk]

Btw @johnmgrant this issue still happening in components recently installed about a week ago, even if there is linked https://github.com/RaenonX-PokemonSleep/pokemon-sleep-ui/pull/625 that is already merged and is supposed this fixes this one, but looks nope.

[johnmgrant]

Btw @johnmgrant this issue still happening in components recently installed about a week ago, even if there is linked https://github.com/RaenonX-PokemonSleep/pokemon-sleep-ui/pull/625 that is already merged and is supposed this fixes this one, but looks nope.

Thanks for the tag. I'll have to check in the project to make sure later on, but it seemed to be a workaround in our use case? I'll follow up regardless.

[TryingToImprove]

When using the Link component from react-aria-components and the ClientRouting configuration for Next App Router (https://react-spectrum.adobe.com/react-aria/routing.html), I had to do it like this:

<Link
  href="/my-url"
  onPress={(e: PressEvent) => {
    if (e.target instanceof HTMLAnchorElement) {
      router.push(e.target.href, {
        scroll: false,
      });
    }
  }}
>
  Link
</Link>;

[Cybermb]

I had this issue only on a specific page. Even when the dialog wasn't shown. My dialog was a direct child of my main element which has flex:grow enabled. When I wrapped the page inside a div inside the main element, the warning went away. Hope that helps some other folks where scroll={false} didnt do the trick

this is I think the best solution, just wrap the things that contains sticky or fixed with a div (or something else) above it (or on the main component) and we don't need the scroll={false} things.

How is this a solution? You are effectively breaking sticky/fixed functionality. In that case you can just remove position sticky/fixed without needing to wrap with another div

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.