[DatePicker]: Invalid valueState on focus out of empty input

[holgerrath]

Bug Description

When valueState property of a DatePicker is set to Error and the date input field is cleared and left, the valueState changes to None.

Affected Component

DatePicker

Expected Behaviour

When valueState property of a DatePicker is set to Error, it should keep this state independent of the internal input value. The valueState property of a DatePicker should only be changed in context of the use case, similar to other components like Input.

Isolated Example

No response

Steps to Reproduce

1. https://sap.github.io/ui5-webcomponents/playground/?path=/story/main-datepicker--state
2. set valueState property to Error
3. focus input field
4. remove date value
5. focus out of the input field

Log Output, Stack Trace or Screenshots

No response

Priority

Medium

UI5 Web Components Version

1.20.0

Browser

Chrome

Operating System

Mac

Additional Context

Issue is caused by _updateValueState function, because _checkValueValidity returns true for empty input value:

_checkValueValidity(value: string): boolean {
  if (value === "") {
    return true;
  }
  return this.isValid(value) && this.isInValidRange(value);
}

_updateValueState() {
  const isValid = this._checkValueValidity(this.value);
  if (isValid && this.valueState === ValueState.Error) { // If not valid - always set Error regardless of the current value state
    this.valueState = ValueState.None;
  } else if (!isValid) { // However if valid, change only Error (but not the others) to None
    this.valueState = ValueState.Error;
  }
}

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[petyabegovska]

7444

6993