ui5-date-picker removes error value state by itself

Bug Description

We are using a ui5-date-picker in with an error value state. When the selected date is changed to another invalid date, we want to keep the Error state. As the Date Picker is removing the error state by itself, we can’t achieve this because React still thinks that the value-state is Error and not None

Expected Behavior

value-state should be fully controllable by end users

Steps to Reproduce

1. Open https://codesandbox.io/s/naughty-visvesvaraya-63pd1?file=/src/App.js
2. Select a Date
3. Click Set Error Value State
4. Select another Date
5. Click Set Error Value State again
6. See: no error state but state “None”

Isolated Example

https://codesandbox.io/s/naughty-visvesvaraya-63pd1?file=/src/App.js

Context

• UI5 Web Components version: 1.0.0-rc.14 (happens with rc.15 candidate as well)
• Affected component: ui5-date-picker, maybe other inputs as well?

Priority

• Low
• Medium
• High
• Very High

[2bno1]

@tsanislavgatev In the example https://codesandbox.io/s/dazzling-chaum-cr9pl?file=/src/index.js, the manual value state change (triggered by clicking Change Value State to Error) only takes effect at the first time. You can reproduce this by:

1. Click ‘Change Value State to Error’ button (Value State is set to Error)
2. Pick a date from date picker (Value State is set to None)
3. Click ‘Change Value State to Error’ button again (Value State is still None)

The reason is

1. When the button is clicked the first time, isError is changed from false to true, App is re-rendered, ui5-date-picker is re-rendered with Error value state.
2. Picking a date from date picker, the ui5-date-picker set the value state to None internally. https://github.com/SAP/ui5-webcomponents/blob/master/packages/main/src/DatePicker.js#L506
3. However, when the button is clicked the second time (or later), isError is kept true, App will not be re-rendered, so the value state of ui5-date-picker is kept None.

I’ve also submitted a similar issue #3516

[phipsalabim]

Hi @tsanislavgatev

Тhis is the expected behaviour of the control

If that’s the case, then the expected behaviour should be revised. As it currently stands, this behaviour makes it impossible to use databinding with the value-state prop, and ultimately makes this component unusable/extremely painful for react/angular/vue/svelte users. State can not be bound to the value-state prop if the component overwrites the value of that prop

The Datepicker provides a prop value-state, yet completely ignores what the user passed into it if a date is selected. That cannot possibly be desirable. It’s equivalent to a function that ignores a parameter that was passed into it, and performs the computation with a different random value.

If a component internally mutates the value of a prop, it destroys any databinding to that prop, and using that component becomes infuriating and confusing.

Very few users write jquery style applications, where it is normal to proceduraly set attributes on dom refs, in a haze of event listeners and callbacks.

Most users will declaratively bind their datamodel to the relevant component props. Including the value-state prop. The value-state should be determined by the data model not by the datepicker. Please do not overwrite it. The datepicker does not know what a valid date is in my business logic. My datamodel has that information. It binds it to the datepicker, which is simply supposed to render that state, rather than ignoring/overwriting it.

As @MarcusNotheis noted, it is not the behaviour of the equivalent ui5 datepicker control

I find it concerning how casually this rather severe issue is being dismissed. twice.