Quasar: Sometimes QModal::close doesn't work.
This happens on Chrome (OSX) while debugging. An intermittent error.
ababo
All 8 comments
It's due to HMR and QModal's feature to mingle with window history in order for the back button to work. Cannot happen in production build.
rstoenescu
on 31 Aug 2017
But it's still a bug, isn't it? Why do you close the issue?
ababo
on 31 Aug 2017
It prevents me from working normally since I just cannot close my Login dialog.
ababo
on 31 Aug 2017
Can I do something in order to fix this?
ababo
on 31 Aug 2017
There's currently nothing that can be done to overcome this for dev builds other than disabling this feature entirely.
What you can do is this though, BUT only for dev builds.
// in main.js:
import { Platform } from 'quasar'
if (DEV) { // this block will automatically disappear on production builds
Platform.has.popstate = false
}
What does it do and why should I avoid that in production? Thanks.
ababo
on 31 Aug 2017
It overrides the detection of popstate event and sets it to false regardless of the environment where the website/app is running under. The "back" button won't close the QModal anymore.
In order for Quasar to provide a feature no other framework has, it stretches the capabilities of both Vue and Webpack's HMR. When you open a QModal it adds an entry in the window History and registers for popstate event so that when you hit back the QModal will get closed rather than your website/app navigate to the previous route (while Modal is still opened at the top). Now, when HMR kicks in, it destroys and recreates the modal, but there's no way to safely remove the history entry (added before when modal first got opened) and still display the modal. So the end result is that each HMR action adds another history entry. You can close the modal if you hit the same amount of HMR actions that took place + 1, or hit browser refresh button (and modal goes away so you need to open it again).
The code indicated above is guarded by if (DEV) so when building for production it completely removes those lines (automatically) and hinders Quasar from taking advantage of the History API thus the side effect of HMR on modals goes away.
rstoenescu
on 31 Aug 2017
Thank you.
ababo
on 31 Aug 2017
Related issues
green-mike
路
3Comments
jippy89
路
3Comments
sskwrl
路
3Comments
fnicollier
路
3Comments
victorborgaco
路
3Comments
Most helpful comment
It overrides the detection of popstate event and sets it to false regardless of the environment where the website/app is running under. The "back" button won't close the QModal anymore.
In order for Quasar to provide a feature no other framework has, it stretches the capabilities of both Vue and Webpack's HMR. When you open a QModal it adds an entry in the window History and registers for popstate event so that when you hit back the QModal will get closed rather than your website/app navigate to the previous route (while Modal is still opened at the top). Now, when HMR kicks in, it destroys and recreates the modal, but there's no way to safely remove the history entry (added before when modal first got opened) and still display the modal. So the end result is that each HMR action adds another history entry. You can close the modal if you hit the same amount of HMR actions that took place + 1, or hit browser refresh button (and modal goes away so you need to open it again).
The code indicated above is guarded by
if (DEV)so when building for production it completely removes those lines (automatically) and hinders Quasar from taking advantage of the History API thus the side effect of HMR on modals goes away.