quasarframework / quasar

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

Modal maximized leaves class q-maximized-modal on body element even after hidden #2417

Closed altShiftDev closed 6 years ago

altShiftDev commented 6 years ago

Software version

Operating System Darwin(16.7.0) - darwin/x64 NodeJs 9.8.0

Global packages NPM 6.3.0 yarn 1.9.2 quasar-cli 0.16.4 vue-cli 2.9.6 cordova 8.0.0

Important local packages quasar-cli 0.16.4 (Quasar Framework CLI) quasar-framework 0.16.0 (Build responsive websites, PWAs, hybrid mobile apps and Electron apps, all simultaneously using same codebase) quasar-extras 2.0.2 (Quasar Framework fonts, icons and i18n.) vue 2.5.16 (Reactive, component-oriented view layer for modern web interfaces.) vue-router 3.0.1 (Official router for Vue.js 2) vuex 3.0.1 (state management for Vue.js) electron 2.0.0 (Build cross platform desktop apps with JavaScript, HTML, and CSS) electron-packager Not installed electron-builder Not installed @babel/core 7.0.0-beta.49 (Babel compiler core.) webpack 4.9.1 (Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.) webpack-dev-server 3.1.4 (Serves a webpack app. Updates the browser on changes.) work

Browsers: Chrome v68.0.3440.106 (official 64-bit)

What did you get as the error?

During a certain series of events the modal can be closed while leaving the class q-maximized-modal on the body element which blocks all overflow and scrolling.

What were you expecting?

All modal related classes to be removed from the body when it closes.

What steps did you take, to get the error?

I allow the user to maximize and un-maximize the modal as they see fit, as well as hiding it (minimize), see my code below.

I suspect the issue is quasar isn't expecting the user to be allowed to maximize and un-maximize(?) modals so it when it exits a modal it only checks if it has the maximized prop currently and if it does removes the body class. It would be ideal if it removed the body class in all cases when v-close-overlay triggers since this use case would be resolved.

Steps to reproduce:

  1. Open a modal (full-screened by default in my case using maximized prop)
  2. Change maximized to false on the modal
  3. Close it through any means (I use v-close-overlay but escape works too)

Modal is now closed but the class remains on body

    // default values are `modalMaximized = true` && `modalOpen = false`
    <q-modal :maximized="modalMaximized" v-model="modalOpen" :content-css="{minWidth: '80vw', minHeight: '500px'}">
      <q-modal-layout>
        <q-toolbar slot="header">

          <q-toolbar-title>
            Fullscreen modal test
          </q-toolbar-title>

          <q-btn
            flat
            round
            dense
            v-close-overlay
            icon="minimize"
          />
          <q-btn
            flat
            round
            dense
            @click="modalMaximized = !modalMaximized"
            :icon="modalMaximized ? 'fullscreen_exit' : 'fullscreen'"
          />
        </q-toolbar>
      </q-modal-layout>
    </q-modal>
rstoenescu commented 6 years ago

Thanks for reporting! Fixed and will be available in 0.17.9.