[Input]: [state binded to value prop not getting reflected in UI]

[aviral49]

Describe the bug

Hi, We are using the Input component, we are binding the value prop to state variable. While handling the onInput event, setting the state based on some validation but its not getting reflected in the UI.
version: "@ui5/webcomponents-react": "1.29.10",
Attaching the sandbox link - https://stackblitz.com/edit/github-virvsk?file=src%2FTestInput.tsx,src%2FApp.tsx,package.json,src%2Fmain.tsx

Isolated Example

https://stackblitz.com/edit/github-virvsk?file=src%2FTestInput.tsx,src%2FApp.tsx,package.json,src%2Fmain.tsx

Reproduction steps

1. Enter numbers in Input field
2. Once the length is greater than 4, setting the state to current state
3. Current state is not reflected in the ui for the input field but can be seen in Label component.

Expected Behaviour

On setting the state to any value, should get reflected in the UI.
In our case, on entering the 5th digit, it should reflect the current value in state variable to ui.

Screenshots or Videos

UI5 Web Components for React Version

1.29.10

UI5 Web Components Version

1.24.9

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SAP

Declaration

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

[Lukas742]

Hi @aviral49

Thanks for reporting! I'll forward this issue to our UI5 Web Components Colleagues as the affected component is developed in their repository.

---

Hi Colleagues,

it doesn't seem possible to control the Input component by setting the value property inside the input event.
I've created a small example that shows the difference between a native input and the ui5-input web component.

Example: https://stackblitz.com/edit/github-qgw27d?file=main.js,index.html,package.json

Reproduction Steps:

1. type "12345" into the ui5-input --> see "12345" inside the input, although only "1234" should be displayed
2. type "12345" into the input --> see "1234" (expected)

Additionally, it's common in React to fully control input components, meaning that if a user types something into the input which implements a value prop the value is handled solely by the React state. In other ui5 web components this is supported by allowing preventing the default behavior by calling event.preventDefault() inside the respective handler.

Example: https://stackblitz.com/edit/github-ve5kvu?file=src%2FApp.tsx,src%2FTestInput.tsx

[IlianaB]

Hello @ui5-webcomponents-topic-rl , please have a look at this issue. It seems it is not possible to control the ui5-input by setting the value property inside the input event, while native input supports such behavior.

Regards,
Iliana

[aviral49]

Hi @IlianaB, did we make any progress on the bug ?
It is blocking our migration to ui5wcr for one of the services in SAP Analytics Cloud.
Could it be picked on priority ?

Thanks,
Aviral

[MapTo0]

Hello @aviral49

Since react has some special handling for input tags explicitly we would need some more time to process that issue.

Best Regards,
Martin

[ui5-webcomponents-bot]

🎉 This issue has been resolved in version v1.24.12 🎉

The release is available on v1.24.12

Your semantic-release bot 📦🚀