quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.75k stars 3.5k forks source link

QDrawer - Page Scroll Disappears on Screen Resize and prop Behaviour change from "mobile" to "desktop" #16651

Open felipegoulart opened 9 months ago

felipegoulart commented 9 months ago

What happened?

When resizing a screen to a larger size, which includes the QDrawer component with controlled model, such as screen size, and behaviour prop is changed from mobile to desktop the page scroll is blocked by prevent-scroll.

What did you expect to happen?

Expected behavior: The scroll should not be blocked.

Reproduction URL

https://stackblitz.com/edit/quasarframework-webpack-cvye6l?file=src%2Flayouts%2FMainLayout.vue

How to reproduce?

  1. Resize the view until the QDrawer disappears.
  2. Resize the view until the QDrawer reappears.
  3. Check if the page scroll is blocked.

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

Operating System - Linux(6.2.0-37-generic) - linux/x64
NodeJs - 16.19.0

Global packages
  NPM - 8.19.3
  yarn - Not installed
  @quasar/cli - 2.3.0
  @quasar/icongenie - 3.1.1
  cordova - Not installed

Important local packages
  quasar - 2.14.1 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-webpack - 3.12.0 -- Quasar Framework App CLI with Webpack
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - 1.1.0 -- Official ESLint plugin for Quasar
  vue - 3.3.7 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - Not installed
  vuex - Not installed
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  @babel/core - 7.23.5 -- Babel compiler core.
  webpack - 5.89.0 -- Packs ECMAScript/CommonJs/AMD modules for the browser. Allows you to split your codebase into multiple bundles, which can be loaded on demand. Supports loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.
  webpack-dev-server - 4.11.1 -- Serves a webpack app. Updates the browser on changes.
  workbox-webpack-plugin - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  typescript - 4.9.4 -- TypeScript is a language for application scale JavaScript development
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

The behavior is noted in vue > v3.3.7. It not ocurried in Vue v3.3.6.

Demonstration

DouglasCalora commented 9 months ago

Up!

eliasassuncao commented 9 months ago

Up!

felipejuzo02 commented 9 months ago

Up!!!

gcarpi commented 9 months ago

Up!