[Feature Request]: Offer value-state-change event & allow preventing internal value-state changes

[Lukas742]

Feature Request Description

In UI5 Web Components for React we're increasingly receiving issues about value-state handling.
In React it's common to fully control a component, meaning that you are always aware of its state which is controlled by a React state. E.g.:

2023-08-15_11-35-51.mp4

codeSandbox

Here the value of the Input is controlled by a React state, every time the value is updated by the user onInput is called and there the React state is updated with the respective value of the input.

For the value-state this behavior can sometimes not be achieved. As example I'm reusing parts of the codeSandbox provided in this issue.

2023-08-15_11-47-28.mp4

codeSandbox

Here the StepInput should keep the "Success" value-state, but since there is no way to prevent the internal validation (setting the value-state internally) and there is no public event developers could register to, it gets kind of tricky without using an observer to detect these changes and then also to adjust the React state accordingly.

With the help of a public custom event (e.g. value-state-change), developers could handle value-state changes in the same way as e.g. value changes. Additionally, it would be great if the event would allow preventing the default behavior (internal value-state changes) by calling event.preventDefault()

Proposed Solution

1. Add a public event that is fired every time the value-state changes
2. Allow preventing the default behavior (internal value-state changes) by calling event.preventDefault() in the handler of the new event.

Proposed Alternatives

If it's not feasible to implement we will outline this particularity in our documentation.

Organization

UI5 Web Components for React

Additional Context

Example of Issues that would most probably profit or even be fixed by this feature:

• StepInput valueState not reflecting state ui5-webcomponents-react#4969
• [MultiComboBox]: Unable to setAttribute "value-state" dynamically #7344
• DateTimePicker: valueState error with valueStateMessage not shown #6993
• DateRangePicker : Value state is not getting set properly ui5-webcomponents-react#5162
• StepInput: Setting the value-state in the change event doesn't work with React state #4791

Priority

None

Privacy Policy

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

[ilhan007]

Hello @SAP/ui5-webcomponents-topic-rl @MapTo0 @hristop I am forwarding the request to your ownership.

Background

This started as a common request to several of our web components related to how we handle value state.
In some web components we change the value-state internally - StepInput, DatePicker and MultiComboBox.
And because it is a public property, sometimes application state gets desynchronised as described in the issue description:

Use-case

The description is taken from above and speaks about the StepInput, but it was same for the DatePicker, and most likely for the MultiComboBox as it applies to web components that have public valueState property, internally changes the valueState property and do not fire any event for that, and any way to prevent the internal value state handling.

"
The StepInput (should keep the "Success" value-state, but since there is no way to prevent the internal validation (setting the value-state internally) and there is no public event developers could register to, it gets kind of tricky without using an observer to detect these changes and then also to adjust the React state accordingly.

With the help of a public custom event (e.g. value-state-change), developers could handle value-state changes in the same way as e.g. value changes. Additionally, it would be great if the event would allow preventing the default behavior (internal value-state changes) by calling event.preventDefault()
"

Proposed Solution

To overcome this, we took the following approach, that has been already implemented in StepInput and DatePicker:

• Add a public event that is fired every time the value-state changes
• Allow preventing the default behavior (internal value-state changes) by calling event.preventDefault() in the handler of the new event.

As the MultiComboBox is the only web component left, that internally changes the valueState property and does not notify the consumers and does not allow preventing it, I am forwarding the issue to you for addressing this request.

BR,
ilhan