[date-picker] Add option to disable keyboard input

[osamamaruf]

Description

At the moment setting the readonlyproperty also stops the date selection from the date picker. At the moment the only difference in disabled and readonly properties seem to be the styling on the component from functional point of view.

Suggestion: The readonlyproperty should just disable keyboard input.

Expected outcome

Set the readonlyproperty to disable keyboard input.

Actual outcome

Date selection is also disabled.

Steps to reproduce

1. Set the readonlyattribute on vaadin-date-picker

[web-padawan]

The WHATWG spec states:

The readonly attribute is a boolean attribute that controls whether or not the user can edit the form control. When specified, the element is not mutable.

So the current implementation is correct. The readonly date-picker is not "mutable" which means you can't change its value neither by typing in the field, nor by selecting.

Please also note that you shouldn't "disable keyboard" because of the fact that using only mouse is against the accessibility, which we are aiming to follow.

[jouni]

The difference between readonly and disabled is that you can still focus a readonly field and copy the value (which you can’t do with a disabled field).

[osamamaruf]

@web-padawan I think I agree. However, can the text whether or not the user can edit the from control be interpreted as a control in which the user cannot type something in but, as @jouni has mentioned that readonly means focusand copy the text i.e. the control can have focus.

So, if a control can be focused it would mean that tab input i.e. the opening of the date picker as a drop down functionality would remain intact.

What I meant by disabling keyboard input was to suggest that the user would not be able to type in the date similar to some drop downs in which we can select a value by keyboard/mouse but keying in a value is not allowed.

Is such a thing possible or in line with what you take from the spec?

For an example of the mentioned behavior please take a look at angular's material date picker here. Check out the Disabled datepicker examples.

[mandymichel]

Yes, we need input disabling like angular has. This would make it much easier to validate against bad date inputs.

[jouni]

This sounds like a separate mode, something like disable-keyboard-input.

We should not overload the readonly mode/state, it should remain as it is currently.

@mandymichel: how does it make validation easier? I assume it means that you can expect only values in the format the picker produces. But a malicious user could still inject a value that is not in the correct format. So I think you would always want to validate the format, at least on the server before storing/using the value.

[mandymichel]

Maybe validate is the wrong word. I want to make sure the date meets certain criteria before the form is submitted (and then validated on the back end). For some reason, the keyboard input date is showing up as undefined on the second use of the form whereas that problem does not happen when only the date picker is used. You're right that it doesn't have to relate to readonly. It could be its own property.

[YounesJonas]

@jouni i think that we can't validate date picker in Back-end (server side)

we get null in 2 differents case when we do datePicker.getValue(): the first when we put a value with incorrect format like this ccddd and we get null also when we don't put anything

for me i want return a error message just in the case where the user put date with incorrect format i haven't any other way to differentiate between the two cases.

thank you for all

[c-t-disher]

Has there been any update here? @YounesJonas seems to be correct. In Vaadin Flow, neither the invalid change listener nor the standard value change listener is invoked when the user types in anything that is not formatted correctly. As a result, validating that sort of invalid input seems impossible.