Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
altShiftDev opened this issue Aug 13, 2018 · 1 comment
Milestone

Comments

@altShiftDev
Copy link

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 rstoenescu added this to the v0.17.9 milestone Aug 13, 2018
@rstoenescu
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants