Describe the bug
I discovered a new strange behaviour on latest versions of Quasar layout. After the screen size is resized below drawer breakpoint, then do another resize above breakpoint, the drawers are always forced open. Note that the behaviour is required to be desktop
.
The v-model state is always override when you resize from "below breakpoint" to "above breakpoint". The app is not on ssr mode, and I tried to set :show-if-above="false"
which should enforce the drawer to be closed but it didn't work also.
Basically, this is what I have https://drive.google.com/open?id=1Smztjv2CHokhdP-BmF7jxFZj0Ge2KI9T . Note that even after setting the drawer to false using the toggle buttons, on next resize the drawer is false open.
What I want is the behaviour on pre v1 as shown https://drive.google.com/open?id=14w2OdslvHSBom030aRAZ5ae2wRdCvKwG . Note that the vmodel state retains the earlier set state even after resize.
Codepen/jsFiddle/Codesandbox (required)
the good behaviour can be seen here (v0.17)
https://v0-17.quasar-framework.org/quasar-play/android/index.html#/showcase/layout-demo/play-with-layout
the unwanted behaviour can be seen here (v1+)
https://quasar.dev/layout-builder
For layout builder, below is my configuration;
<template>
<q-layout view="hHh lpR fFf">
<q-header elevated class="bg-primary text-white">
<q-toolbar>
<q-btn dense flat round icon="menu" @click="left = !left" />
<q-toolbar-title>
<q-avatar>
<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
</q-avatar>
Title
</q-toolbar-title>
<q-btn dense flat round icon="menu" @click="right = !right" />
</q-toolbar>
</q-header>
<q-drawer show-if-above v-model="left" side="left" elevated>
<!-- drawer content -->
</q-drawer>
<q-drawer show-if-above v-model="right" side="right" elevated>
<!-- drawer content -->
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
<q-footer elevated class="bg-grey-8 text-white">
<q-toolbar>
<q-toolbar-title>
<q-avatar>
<img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
</q-avatar>
Title
</q-toolbar-title>
</q-toolbar>
</q-footer>
</q-layout>
</template>
<script>
export default {
data () {
return {
left: false,
right: false
}
}
}
</script>
To Reproduce
Steps to reproduce the behavior:
Expected behavior
The drawers should retain their earlier open/closed states even after resizing page below and above breakpoint. (like it was on v0.17)
Screenshots
See above links for more screenshots.
Platform (please complete the following information):
OS: Windows 10
Node: v12.10.0
NPM: v6.10.3
Yarn: v1.17.3
Browsers: Chrome v77
iOS: n/a
Android: n/a
Electron: n/a
Additional context
Am concerned because this to me is a regression.
@rstoenescu sorry to mention you here, am just thinking about it, should the:show-if-above="false"
override the default desktop
behaviour which as per v1+ forces all drawers to open on big screen. My requirement is to force right drawer to be closed on desktop at initial app initialization.
Thanks
Hi,
false
, so saying :show-if-above="false"
is perfectly equivalent to not using this prop at all.Thanks for the fix, I tested and works like magic
Most helpful comment
Thanks for the fix, I tested and works like magic