[Input with SuggestionItem]: onChange not triggered when selecting item with full suggestion text

[bomasap]

Describe the bug

When using Input with SuggestionItem, there is an inconsistency in the onChange event behavior:

• If the input contains a partial suggestion text (e.g., typing "Icela") and then selecting the suggestion "Iceland" from the popup, the onChange event is triggered.

• If the input already contains the full suggestion text (e.g., typing "Iceland") and then selecting the same suggestion "Iceland" from the popup, the onChange event is not triggered.

This creates inconsistent behavior and makes it hard to detect selection in cases where the user confirms a full match by clicking the suggestion.

Isolated Example

https://stackblitz.com/edit/github-xmbrazp3-rnjz24n1?file=src%2FApp.tsx

Reproduction steps

1. Open the provided StackBlitz link.
2. Open DevTools.
3. Type "Icela" in the input.

• Select "Iceland" from the suggestion popup.
• Check DevTools: onChange event is logged to console.

4. Type "Iceland" in the input.

• Select "Iceland" from the suggestion popup.
• Check DevTools: onChange event is not logged.

Expected Behaviour

The onChange event should be triggered consistently, even when the full suggestion text is already present in the input.

Screenshots or Videos

No response

UI5 Web Components for React Version

2.13.1

UI5 Web Components Version

2.13.1

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

No response

Declaration

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

[Lukas742]

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

[Todor-ads]

Hello @bomasap , Thank you for sharing your findings. Could you please review it once more from your side? In my tests, the onChange event is triggered every time I press enter or tab after typing the full name. Please note that if you attempt to select the same item a second time, the event will not fire because there is no actual change.

Regards, Todor

[bomasap]

@Todor-ads Thanks for replying.

When typing ‘Icel’ and then clicking an item in the suggestion popup, the input’s onChange event fires. However, when typing the full text ‘Iceland’ and clicking the same item, onChange does not fire. Expected behavior: Whether the user types “Icel” or the full “Iceland”, clicking a suggestion in the popup should always trigger the input’s onChange event. Note: Keep the input focused—do not blur the field.

[bomasap]

https://github.com/user-attachments/assets/411c60cf-1e13-4674-871c-19fc44e91b41

I have updated a video to reproduce the issue. Please check.

[Todor-ads]

Hello @bomasap , I watched the video and, in practice, there is no change event because you haven't made a selection yet. After typing the full name, press tab, enter, or click outside the input field to validate your selection, and you will see the message in the console. This is the expected behavior because the validation of the selection occurs on focus out.

Regards, Todor

[codefactor]

Hi team,

Just to clarify - We would like to use the Input with Suggestions and receive an event when the user has clicked on one of the suggestion items. Currently the only event we could find that fires when user clicks on a suggestion item is the "onChange" event. There is an onSelectionChanged event which fires when user is pressing up/down arrow keys - this is not the correct event for when the user clicks on enter key to confirm the selection change.

The problem is that when we listen to the onChange event - it does not fire when the user has typed out the entire text of the suggestion item and clicks on the matching suggestion item. The user must confirm which suggestion they want by the click even if they have typed out the whole thing.

If the user has only typed out a few characters and then chooses the suggestion item, this does trigger the change event. If the user types out the whole thing and presses enter key, this also fires change event. It is only when the user types the whole text of the suggestion and then clicks with the mouse that the change event does not fire.

It could be that we are listening to the wrong event for a suggestion selection event - but there does not appear to be any other event that will serve this purpose. We suggest to then fix the web component to fire the change event upon clicking the suggestion item - even if this does not end up changing the input text or blurring the field.

This inconsistent behavior manifests itself in the following way on one of our screens:

1. When user uses the keyboard to select the item - the change updates the state immediately and can trigger a side effect to other parts of the form.
2. When user uses the mouse to select the item - the change updates only after the user blurs the field by tabbing/clicking away - which makes the form feel less responsive when using the mouse. However, this ONLY happens when user has bothered to type the whole text of the suggestion prior to clicking - which makes the experience seem hard to reproduce depending on how many characters are in the suggestion item.

[bomasap]

Hi @Todor-ads

I’ve updated the StackBlitz. In the example I added a suggestion item named “xyz”. https://stackblitz.com/edit/github-xmbrazp3-576ryxvh?file=src%2FApp.tsx

Observed behavior

Keyboard path: Type “xyz”, press ArrowDown to highlight the “xyz” item, then press Enter → both onSelectionChange and onChange fire.

Mouse path: Type “xyz”, then click the “xyz” item → only onSelectionChange fires; onChange does not fire.

We expect these two interactions to behave consistently. Specifically, when the user clicks a suggestion item, there should be a single definitive event that notifies consumers that a suggestion item was chosen (the same as the keyboard selection path).

https://github.com/user-attachments/assets/7fadc6e3-3311-4e94-a1f3-463e0027bb15

[NakataCode]

Hello @SAP/ui5-webcomponents-topic-rl,

Could you take a look at this issue with Input suggestions? For comparison, I tested the same functionality in OpenUI5 and the change event fires consistently regardless of text completion state.

Best Regards, Nikola

[floa93]

We noticed the same issue as @bomasap and @codefactor . If there is another event we can use it's fine too, but the inconsistency of the change event is confusing for the user. And also in previous version the change event behaved as described by @bomasap . I can't say when it changed exactly as we just discovered it yesterday, too.

[aleksandar-terziev]

Fixed in #12206

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!

[bomasap]

Hi Team, I’ve upgraded the UI5 WC version to 2.15.0, but the issue still persists. https://stackblitz.com/edit/github-xmbrazp3-jmbxehdw?file=package.json

[aleksandar-terziev]

Hi @bomasap , I tested on version 2.15.0 using the last StackBlitz link that you provided and I made a screen recording verifying that on Mouse path: Type “xyz”, then click the “xyz” item → onSelectionChange fires and onChange fires. Can you double check again ?

https://github.com/user-attachments/assets/95dce005-e434-4fef-bf2e-35e43cac2cb6

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[github-actions[bot]]

This issue has been closed. To reopen, just leave a comment!