Click on field with calendar inside makes date to go 1 month back
Diferno opened this issue · comments
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?
- Go the the Quasar v2 documentation -> field -> Control Types -> calendar
- 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
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. 👏
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:
- user clicks
q-field
label q-field
passes focus and click to the contained control- upon getting focus,
q-date
passes focus to first focusable child, which is "previous month" button - 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.
Created a PR with possible solution:
- In
q-field
an object is provided asq-field-container
, withswallowClick(flag)
setter which controls event swallowing behavior (this behavior is disabled by default, can be changed with aforementioned setter). q-date
attempts to inject that object, and if successful, it callsswallowClick(true)
This is a POC, it seems to be working, and probably needs to be refined.
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:
- user clicks
q-field
labelq-field
passes focus and click to the contained control- upon getting focus,
q-date
passes focus to first focusable child, which is "previous month" button- then click event from
q-field
reaches current focus target, and we're getting the behavior described in this issueTBF 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
hasq-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