Bug: Switching one layout drawer affects another unrelated drawer in Quasar

[jacktanxd]

What happened?

I have encountered a bug while using two q-drawer components in my Quasar application. One drawer is placed inside a container layout, and the other is separate. When I toggle one of the drawers, the other drawer (which I am not interacting with) flickers and briefly shows, even though I have not performed any action to control it.

1009_1726929158_raw.mp4

What did you expect to happen?

Toggling one drawer should not affect or trigger the display of the other drawer.

Reproduction URL

https://github.com/jacktanxd/qusar-q-drawer-test

How to reproduce?

1. Create a page with two q-drawer components.
2. Place one drawer inside a container layout.
3. Toggle one of the drawers using a button.
4. Observe that the other drawer flickers or flashes, even though no direct interaction or control is made to it.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Microsoft Edge

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @jacktanxd! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[rstoenescu]

Hi,

Thanks for supplying a reproduction repo.

The problem is that you are instructing the QDrawer from AlarmLayout that it's width is 100px, yet you are overwriting that through CSS with calc(50% - 2px). Due to the nature of how QLayout works (with all its countless combinations of options for each layout part) we can only accept a Number as the width prop value.

So, if you still want for the QDrawer to occupy half the width of the window, then you can create a ref to store the drawer width (initialize with window.width / 2) and then either:

1. Listen for the @resize event on QLayout to update the width
2. Add a QResizeObserver directly under your QLayout and listen for its @resize event.

[jacktanxd]

Thank you so much for your help! Your solution worked perfectly and solved my issue. I really appreciate your time and effort in providing such a detailed explanation.

Thanks again!