Quasar: Drawer with desktop behaviour always force to open when resize is done to "below breakpoint" then to "above breakpoint"

Created on 18 Sep 2019  路  3Comments  路  Source: quasarframework/quasar

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:

  1. Go to https://quasar.dev/layout-builder
  2. Set up the cofigurations as shown on my screenshots https://drive.google.com/open?id=1h2DwqjIRQ5ifBXeOcocIWz2-vsxHzCQg
  3. Close the drawers using the menu button on the toolbar
  4. Open Chrome dev tools and resize your screen using toggle device button as shown on image, this will set screen size to a mobile display https://drive.google.com/open?id=1uciT_R2nMxnwOk6CbtD5LUa1Tv0r8hXN
  5. Click to Toggle the display again which will reset display to desktop size
  6. You should not that even after the drawers were closed before resize, the drawers are opened again without user action

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.

bug

Most helpful comment

Thanks for the fix, I tested and works like magic

All 3 comments

@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,

  • It's ok to mention me here. No worries.
  • Fix will be available in v1.1.3.
  • All boolean props are by default 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

Was this page helpful?
0 / 5 - 0 ratings