Click on field with calendar inside makes date to go 1 month back

[Diferno]

What happened?

Clicking outside the calendar if the calendar is embedded inside a q-field, makes the calendar to go 1 month back.

From the Quasar official docs example:

What did you expect to happen?

Nothing is triggered with the click. (as shown in the example in quasar v1)

Reproduction URL

https://quasar.dev/vue-components/field#control-types

How to reproduce?

1. Go the the Quasar v2 documentation -> field -> Control Types -> calendar
2. Click inside the field but outside the calendar (not picking a date)

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @Diferno! 👋

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. 👏

[alexkunin]

Here is a Codepen with minimal reproduction. Just click field caption -- "Pick a date" -- to see the behavior described above.

So, it seems the following is what's happening:

1. user clicks q-field label
2. q-field passes focus and click to the contained control
3. upon getting focus, q-date passes focus to first focusable child, which is "previous month" button
4. then click event from q-field reaches current focus target, and we're getting the behavior described in this issue

TBF this seems to be a reasonable behavior in most cases, except certain compound components (probably not all of them!).

I think valid solution would be to "swallow" click event if q-field has q-date inside. But it will introduce tight coupling between these components...

Update. It seems things happen on a lower level, a q-field contains <label> which passes click to first tabbable element inside. Apparently, it is a sleeping accessibility issue.

[alexkunin]

Created a PR with possible solution:

1. In q-field an object is provided as q-field-container, with swallowClick(flag) setter which controls event swallowing behavior (this behavior is disabled by default, can be changed with aforementioned setter).
2. q-date attempts to inject that object, and if successful, it calls swallowClick(true)

This is a POC, it seems to be working, and probably needs to be refined.

[Diferno]

Here is a Codepen with minimal reproduction. Just click field caption -- "Pick a date" -- to see the behavior described above.

So, it seems the following is what's happening:

1. user clicks q-field label
2. q-field passes focus and click to the contained control
3. upon getting focus, q-date passes focus to first focusable child, which is "previous month" button
4. then click event from q-field reaches current focus target, and we're getting the behavior described in this issue

TBF this seems to be a reasonable behavior in most cases, except certain compound components (probably not all of them!).

I think valid solution would be to "swallow" click event if q-field has q-date inside. But it will introduce tight coupling between these components...

Update. It seems things happen on a lower level, a q-field contains <label> which passes click to first tabbable element inside. Apparently, it is a sleeping accessibility issue.

Thx for the codepen, didnt see the bot's message