ui5-datepicker: valid flag is still true when input a date value out of the max and min scope

[zhangliangyi]

Hi colleagues,

I am from Experience Web team in SAP Successfactors.

Describe the bug
In datepicker with minDate and maxDate, if user inputs a date value out of the scope defined by keyboard. The valid flag in event.originalEvent.detail is still true while the valueState of the field is switched to Error.

ui5-webcomponents/packages/main/src/DatePicker.js

Line 460 in df0add4

this.fireEvent("change", { value: nextValue, valid: isValid });

To reproduce
Steps to reproduce the behavior:

1. Go to https://sap.github.io/ui5-webcomponents/playground/components/DatePicker/
2. Input '1/1/2019' in the date field in the 3rd section

Expected behavior
The valid flag exposed in the change event should be false in this case.

Context

• UI5 Web Components version: rc7
• OS/Platform: MacOS
• Browser (if relevant): Chrome
• Other information: N/A

[ilhan007]

Try this URL, pointing to the master:
https://sap.github.io/ui5-webcomponents/master/playground/main/pages/DatePicker/

The valueState is set on change, when the focus moves out of the date picker.
If it is empty value, the valueState should be cleared out.

Should be fixed with:
#1742

[zhangliangyi]

@ilhan007
The fix you attached above is just fixing the unnecessary error state in empty value case (also it is reported by me).

In this case, if you type the date value out of the scope between minDate and maxDate, the change event should expose the valid value with false instead of true.

In other word, it may be like this:

this.fireEvent("change", { value: nextValue, valid: isValid && isInValidRange }); 

Then the valid flag would be consistent to the valueState.