Skip to content

definePageMeta({ scrollToTop: false }); not working for nested pages #25241

@awacode21

Description

@awacode21

Environment


  • Operating System: Darwin
  • Node Version: v18.16.0
  • Nuxt Version: 3.8.1
  • CLI Version: 3.9.1
  • Nitro Version: 2.7.2
  • Package Manager: npm@9.5.1
  • Builder: -
  • User Config: ssr, devtools, modules, css, vite, imports, app, i18n, runtimeConfig
  • Runtime Modules: @nuxtjs/tailwindcss@6.9.4, @pinia/nuxt@0.4.11, @vueuse/nuxt@10.6.1, nuxt-icon@0.4.2, @nuxtjs/i18n@8.0.0-rc.5
  • Build Modules: -

Reproduction

https://stackblitz.com/edit/nuxt-starter-5xeqgj

Describe the bug

This example contains several NuxtLinks which route to nested page "dialog". The dialog gets displayed in nested <NuxtPage/> component. Which means you will see root page underneath and child page above it.

Within the nested dialog page i defined
definePageMeta({ scrollToTop: false });
because i don't want to have any page scrolling to happen when opening the dialog. I want the user to stay where he was in page.

According to this documentation: https://nuxt.com/docs/api/utils/define-page-meta
this setting should be available and working. Also having a look at this code: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/pages/runtime/router.options.ts
scrollToTop meta data seems to be handled.

BUT when you scroll through parent page and click several times on the different "open dialog" buttons, you will experience page scrolling, and it scrolls in a very wrong way. And it looks like it always scrolls to second last scroll position parent page had the last time you called nested page.

Steps to reproduce

  1. Scroll to last "open dialog" Link in page and click
  2. No scrolling as it is the first time we open that route. Here the definePageMeta({ scrollToTop: false }); code seems to work.
  3. close dialog
  4. Scroll to first "open dialog" button in page and click
  5. The nested dialog page is displayed, but page scroll happens to the scroll position parent page had the first time you went to nested page route. So it scrolls to somewhere at the end of page
  6. Close dialog
  7. Scroll to middle of the page and click the second "open dialog" link
  8. Nested dialog page is displayed, but page scroll happens to the scroll position parent page had the second time you went to nested page route. So it scrolls to somewhere at the top of page

EXPECTED RESULT: No scrolling at all when calling nested page as i set scrollToTop: false for the nested route.

Additional context

No response

Logs

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions