Quasar: v-model on QLayoutDrawer bug

[marekkaczkowski]

Hey Guys,

I found strange bug since v0.15.14.

I have form in QLayoutDrawer,
if there are input fields in a QLayoutDrawer,
InputEvents are bubbling-up to QLayoutDrawer's v-model causing error:

[Vue warn]: Invalid prop: type check failed for prop "value". Expected Boolean, got InputEvent.
found in
---> <QLayoutDrawer>
       <QLayout>
         <Showcase> at src/layouts/showcase.vue
           <Root>

You can simply reproduce this bug on quasar-play repo by adding

          <q-item>
            <q-input value="foo" />
          </q-item>

in showcase layout src/layouts/showcase.vue below line 51 as first QList item.

Than open quasar-play showcase, open DevTools and try to type something in added QInput field.

Don't know why but somehow QInput is calling drawerState.set(computed) and passing InputEvent as val. How it is even possible, input is not changing drawerState prop?

[mkarnicki]

I can confirm the issue. Sadly, I have nothing more to say than @marekkaczkowski already has.

[rstoenescu]

Duplicate of: https://github.com/quasarframework/quasar/issues/2079

This issue does not make any sense. At best, it would be a Vue issue, not Quasar issue. The model of an input and the model of the Drawer are not connected in any way. In the duplicate issue I have tested on all browsers, including even Vivaldi and could not reproduce.

[rstoenescu]

There's also nothing changed between 0.15.13 to 0.15.14 that could possibly affect this.

[rstoenescu]

Will keep on trying to reproduce and then most likely investigating to find root cause in Vue code.

[mkarnicki]

This probably has nothing to do with Quasar, but I don't know WHAT hah.

I downgraded to
"quasar-extras": "^1.0.2",
"quasar-framework": "^0.15.6",

and still have this issue. Even nuked my node_modules. I'm also looking for the problem and will report if I have anything / can repro with jsfiddle. It literally replaces isOpen in my LayoutDrawer with an InputEvent, which is so weird.

[mkarnicki]

Maybe this will be helpful. This was what my isOpen value on the q-layout-drawer was replaced with (I used a watch to console.log it)

Note: bubbles: true, defaultPrevented: false

[mkarnicki]

Haha was looking at the same piece of Quasar code just a moment ago :). Man you're fast! 💯

[rstoenescu]

Added a temporary workaround until I have time to investigate this Vue bug. It is a Vue bug.
One important detail was that the Drawer needs to be in "desktop" mode only for this to be reproducible. If it's in "mobile" mode, it won't reproduce which was part of my initial confusion.

Workaround available in Quasar 0.16.1 (do not confuse with CLI version).