DateRangePicker : Value state is not getting set properly

[DikshaHub]

Describe the bug

When we set a date range and removes the startDate and endDate completely it throws an error. But say when we set a date range and remove a part of it, it throws an error. After that if we remove the remaining date range it doesn't display the red error field.

Isolated Example

https://codesandbox.io/s/goofy-framework-6gffrc?file=/src/App.js

Reproduction steps

1. Please open the link "https://codesandbox.io/s/goofy-framework-6gffrc?file=/src/App.js".
2. Select date range "2023-10-17 - 2023-10-19".
3. Remove the complete date range. It will throw an error stating "Invalid entry". And the text field is marked as red box.
4. Now again select date range "2023-10-17 - 2023-10-19".
5. Remove a part of it. Say new date range is "2023-10-17 - 2023-10". For this it will throw an error stating "Invalid entry". Also at this moment text field is marked as red box.
6. Now remove the complete date range. The text field is empty now. Although it set the valueState to "Error", it is not reflected as red box.

Expected Behaviour

Should display the red error text field when we remove complete date range (when the date range is empty) .

Screenshots or Videos

https://github.com/SAP/ui5-webcomponents-react/assets/66899235/64ddb99b-a306-4d21-9c0c-e59e520d844f

UI5 Web Components for React Version

1.19.0

UI5 Web Components Version

1.17.0

Browser

Chrome

Operating System

Mac

Additional Context

No response

Relevant log output

No response

Declaration

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

[Lukas742]

Hi @DikshaHub

the valueState attribute of the web component is reset internally, since React doesn't "know" what happens outside of its lifecycle, the React state isn't updated and therefore the attribute isn't neither. You can find out more about this here.

If you want to fully control the component, you could for example use an MutationObserver. I've created a codeSandbox that shows how a basic implementation could look like. Of course there are other options that could be better suited, depending on the use-case. E.g.:

• If you want to reflect the internal valueState changes in your React state, then you could subscribe to those changes, also by adding a MutationObserver and setting the React state on every change. Then you could react to these changes.
• You could check where the internal changes happen and react to them in your handler. E.g. reset it to "Error" after the input was cleared and the internal state was set to "None". Here you could work with a React state in the onChange handler, so that it gets updated after the internal change happened.
• You could use a timeout before you set the React state, so that the web-component is updated first.

Please note, that these workarounds are all very use-case specific and I can't give a general recommendation on which one's better.

Could you please let me know if this information is sufficient and if the feature request I've opened is covering your case as well?

[github-actions[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Inactive issues will be closed after 7 days. Thanks.

[github-actions[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please first check to see if the maintainers have requested additional input and provide it if necessary, or post a detailed description of why this issue is still a problem.