WARNING: THIS SITE IS A MIRROR OF GITHUB.COM / IT CANNOT LOGIN OR REGISTER ACCOUNTS / THE CONTENTS ARE PROVIDED AS-IS / THIS SITE ASSUMES NO RESPONSIBILITY FOR ANY DISPLAYED CONTENT OR LINKS / IF YOU FOUND SOMETHING MAY NOT GOOD FOR EVERYONE, CONTACT ADMIN AT ilovescratch@foxmail.com
Skip to content

QDialog: scroll position not restored if route changed #18185

@w0pp

Description

@w0pp

What happened?

QDialog doesn't restore scroll position after closing it if window.location.href has changed.

scroll_position_not_restored.mp4

What did you expect to happen?

QDialog should restore scroll position after closing even if window.location.href has changed. Otherwise, you can't change URL hash or query parameters and have the scroll position restored after closing the dialog.

Possible alternative solutions:

  • Restore scroll position if only URL hash or query parameters have changed, but route path stayed same.
  • Add a setting to control this.
  • Decide based on QDialog's no-route-dismiss prop.
  • Decide based on Vue Router's scrollBehavior option.

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-yhk2dumd?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

  1. Go to the provided reproduction link
  2. Scroll down
  3. Click "Show dialog"
  4. Close dialog by clicking outside it
  5. The page is scrolled up - scroll position isn't restored because URL has changed

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Linux(5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36) - linux/x64
NodeJs - 20.19.1

Global packages
  NPM - 10.8.2
  yarn - 1.22.19
  pnpm - 8.15.6
  bun - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.17.4 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.4.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.17.0 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.24 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.6.3
  pinia - Not installed
  vite - 7.2.4 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.39.1 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.25.12 -- The cross-platform WebAssembly binary for esbuild, a JavaScript bundler.
  typescript - Not installed
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - quasarframeworkstackblitztempl-dus4
  en0 - 192.168.1.104

Relevant log output

Additional context

Problematic code: https://github.com/quasarframework/quasar/blob/dev/ui/src/utils/scroll/prevent-scroll.js#L152-L154

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions