fix: enable input into autoOpenDisabled date picker on mobile #3165
Conversation
tomivirkki
force-pushed
the
date-picker-mobile-auto-open-disabled
branch
4 times, most recently
from
27e156b
to
963ca6f
Compare
tomivirkki
force-pushed
the
date-picker-mobile-auto-open-disabled
branch
2 times, most recently
from
5c611b2
to
4a6bbe6
Compare
|
Looks great! The only issue I noticed is that when you have the overlay open, and click outside it or click "Cancel" or "Today", the keyboard pops up again, because the field gets focused. I think I would prefer to have the field blurred in that case instead. Not sure how much complexity that might add. |
|
The input refocus logic comes from #1901 (a recent |
tomivirkki
force-pushed
the
date-picker-mobile-auto-open-disabled
branch
from
4a6bbe6
to
f604d7e
Compare
|
|
||
| this.addEventListener('touchend', (e) => { | ||
| if (!this._isClearButton(e)) { | ||
| e.preventDefault(); | ||
| } | ||
| }); |
There was a problem hiding this comment.
Canceling the "touchend" events seems not to be relevant anymore. It was originally added 6 years ago and was probably related to preventing ghost clicks.
| @@ -96,14 +112,21 @@ describe('basic features', () => { | |||
| await oneEvent(datepicker.$.overlay, 'vaadin-overlay-open'); | |||
| }); | |||
|
|
|||
| it('should not open on input tap when autoOpenDisabled is true and not on mobile', () => { | |||
There was a problem hiding this comment.
This test was moved inside "auto open disabled"
| @@ -188,12 +211,6 @@ describe('basic features', () => { | |||
| await oneEvent(datepicker.$.overlay, 'vaadin-overlay-open'); | |||
| }); | |||
|
|
|||
| it('should open by tapping the calendar icon even if autoOpenDisabled is true', async () => { | |||
There was a problem hiding this comment.
This test was moved inside "auto open disabled"
|
Kudos, SonarCloud Quality Gate passed!
|
There was a problem hiding this comment.
Tested the feature on iPhone and it works perfectly with perhaps one UX caveat: the keyboard pops up again after the calendar is closed, @jouni has already mentioned this:
The only issue I noticed is that when you have the overlay open, and click outside it or click "Cancel" or "Today", the keyboard pops up again, because the field gets focused
However, it is probably a necessary evil as otherwise, we lose focus after closing the calendar which makes it difficult to interact with the date-picker by the keyboard for screen reader users.
|
This ticket/PR has been released with platform 23.0.0.alpha1 and is also targeting the upcoming stable 23.0.0 version. |
This change enables typing text to the date picker input field on small screen devices (also iOS generally) when auto-open is disabled and the dropdown is closed.
Fixes #3047
Kapture.2021-12-10.at.12.05.51.mp4
Note: Currently, text input is generally disabled on iOS to avoid the virtual keyboard from covering the date picker dropdown:
After this change, when auto-open is disabled, you can focus the input and type into the field also on iOS while the dropdown remains closed.
As soon as the dropdown opens, the input field is blurred, even on larger screen touch devices such as iPads.