Skip to content

QDrawer: swipe-to-open gesture broken on mobile (onOpenPan guard condition inverted in v2.20.0) #18331

Description

@128na

What happened?

QDrawer's edge-swipe-to-open gesture is broken whenever the drawer starts in a closed state on a viewport below the breakpoint (i.e. exactly the mobile case it's meant for). Dragging/swiping from the screen edge has no effect at all while the drawer is closed; it only "works" while the drawer is already open (a no-op).

Root cause: in src/components/drawer/QDrawer.js, the early-return guard inside onOpenPan() was inverted between v2.19.3 and v2.20.0.

v2.19.3 (correct):

function onOpenPan(evt) {
  if (showing.value !== false) {
    // some browsers might capture and trigger this
    // even if Drawer has just been opened (but animation is still pending)
    return
  }
  ...

v2.20.0 / v2.20.1 / dev (broken):

function onOpenPan(evt) {
  // some browsers might capture and trigger this
  // even if Drawer has just been opened (but animation is still pending)
  if (!showing.value) return
  ...

showing.value !== false (skip only when already showing) was changed to !showing.value (skip when not showing) — the exact logical opposite. As a result, onOpenPan now bails out immediately whenever the drawer is closed, which is exactly the case where the open-by-swipe gesture is supposed to do something.

Note: onClosePan retains the same (correct, for its purpose) if (!showing.value) return guard — that one is fine since closing should only matter while showing. It's specifically onOpenPan that got the wrong condition during this change.

Confirmed present in the latest published version (quasar@2.20.1) and on the dev branch HEAD as of 2026-06-20 — not yet fixed anywhere.

What did you expect to happen?

Swiping/dragging from the edge should open the drawer, same as in v2.19.3 and earlier.

Reproduction URL

https://jsfiddle.net/ytma3qLn/

How to reproduce?

  1. Go to the reproduction link (loads quasar@2 from CDN, currently resolving to v2.20.1, with a q-drawer forced into mobile/swipe mode via breakpoint="9999", starting closed).
  2. Click "Run" if the preview hasn't loaded.
  3. In the result pane, press the mouse down at the very left edge of the preview (x < 15px) and drag it to the right.
  4. Observe: nothing happens, the drawer stays closed.
  5. For comparison, click the "Open drawer via button" button — this works fine, confirming the drawer itself and v-model binding are not the problem, only the pan/swipe-to-open gesture.
  6. Edit the HTML to pin quasar@2.19.3 instead of quasar@2 in the two CDN URLs and re-run — the same drag gesture now correctly opens the drawer.

Flavour

UMD

Areas

Components (quasar), Directives (quasar)

Platforms/Browsers

Chrome, Android, iOS

Quasar info output

Reproduced via UMD/CDN (quasar@2.20.1), not through Quasar CLI, so quasar info isn't applicable here. Originally found in a project using:

Pkg quasar................ v2.20.0 (regression also present in v2.20.1, latest)
Pkg @quasar/app-webpack... v3.15.1

Additional context

Workaround: pin quasar to 2.19.3 until this is fixed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions