[ComboBox]: Change event is fired at the wrong time

[lormanlau1]

Describe the bug

The change event is fired while scrolling through the dropdown list using the arrowkeys

Isolated Example

https://stackblitz.com/edit/github-52u2mk-sz2baq?file=src%2FApp.tsx

Reproduction steps

1. Focus on the input
2. Use arrow keys to navigate through the list
3. Observe that the change event is fired every time.

Expected Behaviour

Change event is only fired when entered is press or when focus is lost.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.29.0

UI5 Web Components Version

1.24.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

SAP SuccessFactors

Declaration

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

[Lukas742]

Hi @lormanlau1

this behavior seems to be intended (see docs):

Fired when the input operation has finished by pressing Enter, focusout or an item is selected.

Please let us know if you believe the behavior is still incorrect. If so, we will forward this issue to the UI5 Web Components repository, where the component is developed.

[lormanlau1]

The behavior that is not intended is that when user is scrolling through the list using arrow keys the change event is fired. This should not count as "item is selected" since there is no way for screen reader users to scroll through the list without the items being selected. This behavior on the UI5 Webcomponent is working as expected as well as the OpenUI5 but the react component is functioning differently.

[Lukas742]

This behavior on the UI5 Webcomponent is working as expected as well as the OpenUI5 but the react component is functioning differently.

Since we only wrap ui5 web components, meaning we're not changing any implementation details, this shouldn't be the case. I've refactored your example to use only HTML with JS and the behavior is the same: https://stackblitz.com/edit/github-mxofyy?file=main.js,index.html,package.json

If that's not the case for you, please provide the following informations:

• Browser + version
• OS + version
• Do you have any Browser plugins/extensions installed?

[lormanlau1]

@Lukas742 I am sure why this is the same with UI5 web component on stackblitz but please take a look at this link in the UI5 Web Components playground. Observe that the change event is only fired when focus is lost, enter button is press or a list item is clicked with a mouse.

• Chrome Version 127.0.6533.120
• MacOS Sonoma 14.6.1
• No plugins effected
• No overrides

Upon further investigation, it seem like this issue was fixed inside of UI5 Webcomponents between 1.49 > 2.1.2 need to request patch this into version 1 since upgrading to version 2 is to risky for us.

[lormanlau1]

I have opened a ticket in the UI5 Web Component repo for patching into version. https://github.com/SAP/ui5-webcomponents/issues/9776. We would also need an update in the ui5 webcomponent react

[Lukas742]

I didn't know that they changed this behavior, but good to know.

Patch releases are always compatible with the respective minor version (see here), so if the fix is available for example in v 1.24.10 of @ui5/webcomponents you can just update the respective dependency if you're using v1.29.x of @ui5/webcomponents-react.

Please note that v1 will only be supported until the end of the year.