Keyboard input prototype [🕔2d]

[jouni]

Allow the user to type the date using the keyboard (separate feature from the existing keyboard navigation).

Initial specs from which we can start prototyping:

It feels there isn’t a way to split this up into smaller, incremental features, unfortunately.

[mercmobily]

Just to make sure... there is no way to allow the user to just type a date in the input field, and see that date as "set" in the calendar. Is that correct?

if that is the case, doesn't it make more sense, at least for the time being, NOT to make the input field editable at all?

Right now a user might type a date, submit the form, and... end up with an empty date in the database!

[jouni]

The input field is currently not editable (read-only).

In the proposed design, the user can type a date in the input field, and a valid matching date is indicated in the dropdown with some visual style. Then, if the user leaves the field (blur, submit, etc.) or presses enter, that date would be set as the value of the field.

[mercmobily]

I can edit the field using Chrome! Just click on the date, open up the
picker, and press escape. You can change the date although the change has
no effect... Which is confusing to the user!

On 28 Aug 2016 5:27 PM, "Jouni Koivuviita" notifications@github.com wrote:

The input field is currently not editable (read-only).

In the proposed design, the user can type a date in the input field, and a
valid matching date is indicated in the dropdown with some visual style.
Then, if the user leaves the field (blur, submit, etc.) or presses enter,
that date would be set as the value of the field.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#196 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACB7XodMqDY7t5rA0Zt3DuM4UtKvF3SYks5qkVSegaJpZM4I3Ghd
.

[jouni]

Then that sounds like a bug. I can’t reproduce that myself on OS X Chrome. Could you open a new issue for it, and provide steps how to reproduce it? Thanks for reporting!

[mercmobily]

Sorry for the noise here, I didn't think it was a bug -- I actually thought it was the intended behaviour, and that it already did set the date from the textbox...!
Opening a bug now.

[jouni]

No problem at all @mercmobily! This was an important catch, quite a serious bug, which was introduced in some 1.1.x version. I was testing it on vaadin.com/elements page, where we have some older version in use, and it didn’t show there. For future reference, the bug is tracked in #225.

[mercmobily]

My 2c about this very issue (that is, Keyboard input).
Right now, the element offers a way to visualise a date in several formats -- which is great. However, if/when you do implement this feature, you will need to make sure you allow users to enter the date in the same format it's displayed. It's not an easy problem, because I might decide to display dates as YYYY-DD-MM and expect that as input. Or the display format (and therefore the input format) might depend on locale etc...

[tomivirkki]

There's a working prototype at https://github.com/vaadin/vaadin-date-picker/tree/feature/keyboard-input (Make sure to run bower install as the branch introduces a new dev dependency).

The proto doesn't really take mobile into account that much except that it does some naive user input prevention at the moment (will enforce later).

Current implementation covers the states defined in the plan but makes some assumptions with behaviour in some situations that were left undefined in the design.

There's a demo of the feature in the advanced.html demo page. Needs user/developer testing so we can proceed with the actual feature implementation.

[mercmobily]

I would be more than happy to help testing this.
Where would you like me to add comments though, now that the ticket is marked as closed...?

[jouni]

@mercmobily thanks, and sorry about the delay in response!

I created a new issue for the real implementation, you can add any comments there: #238