ui5-date-picker removes error value state by itself
See original GitHub issueBug 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
- Open https://codesandbox.io/s/naughty-visvesvaraya-63pd1?file=/src/App.js
- Select a Date
- Click
Set Error Value State
- Select another Date
- Click
Set Error Value State
again - 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
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
DataPicker's internal validation reset valueState unexpectedly ...
The problem is that the DatePicker Component changes its own value state implicitly if it's in an Error State and a new date...
Read more >Validate input of datetime picker - sapui5 - Stack Overflow
Simply set in in your XML, validationError="functionNameHere" and in your JS you can just set the ValueState to error. The validationError event ...
Read more >How to set value state of a control inside a table (and not on ...
I want to set the value state to "error" when the content of a cell is changed. To do this, I attached an...
Read more >sap.m.DateTimePicker - API Reference - Demo Kit
Use dateValue as a helper property to easily obtain the day, month, year, hours, minutes and seconds of the chosen date and time....
Read more >Date Time Picker - UI5 Web Components - SAP
Use the DateTimePicker if you need a combined date and time input component. Don't use it if you want to use either date,...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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:The reason is
isError
is changed fromfalse
totrue
,App
is re-rendered,ui5-date-picker
is re-rendered withError
value state.None
internally. https://github.com/SAP/ui5-webcomponents/blob/master/packages/main/src/DatePicker.js#L506isError
is kepttrue
,App
will not be re-rendered, so the value state ofui5-date-picker
is keptNone
.I’ve also submitted a similar issue #3516
Hi @tsanislavgatev
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.