search

SAP / ui5-webcomponents

UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
https://sap.github.io/ui5-webcomponents/
Apache License 2.0
1.54k stars 265 forks source link

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

Open Lukas742 opened 1 year ago

Lukas742 commented 1 year ago

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.:

https://github.com/SAP/ui5-webcomponents/assets/9749730/e87ee8fe-18ed-45dd-bdd8-203bc4edce95

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.

https://github.com/SAP/ui5-webcomponents/assets/9749730/dd3bb279-3bab-4fb1-abd2-16731b24a914

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:

Priority

None

Privacy Policy

ilhan007 commented 3 months ago

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:

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