Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[ui5-combobox, Angular 18]: selection-change event is not fired when the matched text as available option is written in the input and clicked on the dropdown #10239

Open
1 task done
TsvetomirGT opened this issue Nov 22, 2024 · 3 comments · May be fixed by #10524
Open
1 task done

[ui5-combobox, Angular 18]: selection-change event is not fired when the matched text as available option is written in the input and clicked on the dropdown #10239

TsvetomirGT opened this issue Nov 22, 2024 · 3 comments · May be fixed by #10524
Assignees
@nikoletavnv
Labels
bug This issue is a bug in the code Medium Prio TOPIC RL

Comments

@TsvetomirGT
Copy link

Bug Description

In an Angular 18 application using SAP UI5's ComboBox component, a bug occurs when the user types text into the input field that matches one of the options in the dropdown and then selects that option by clicking on it. The issue is that the selection-change event is not triggered as expected.

Affected Component

ui5-combobox

Expected Behaviour

When the user clicks on the matching option in the dropdown, the selection-change event should fire, regardless of whether the text was pre-typed in the input field.

Isolated Example

No response

Steps to Reproduce

  1. Integrate a ui5-combobox component into an Angular 18 application using the SAP UI5 framework.
  2. Add ui-cb-items.
  3. Add a listener for the selection-change event to handle the selection logic.
  4. Type a value into the ComboBox input field that matches an available option (e.g., "Option 1").
  5. Select the matching option from the dropdown by clicking on it.
    ...
    (Optional steps)
  6. Type a value into the ComboBox input field that matches an available option (e.g., "Option 1").
  7. Add one or more spaces after (e.g., "Option 1 ")
  8. Remove the spaces
  9. Select the matching option from the dropdown by clicking on it.

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.3.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.
@TsvetomirGT TsvetomirGT added the bug This issue is a bug in the code label Nov 22, 2024
@s-todorova s-todorova self-assigned this Nov 25, 2024
@s-todorova
Copy link
Contributor

Hello @TsvetomirGT,

It would be especially helpful if you could share a code snippet or a live example that demonstrates the problem. This will help us better understand the issue and offer an appropriate solution. I attempted to reproduce the problem locally with regular version of WebComponents, but was unable to reproduce the issue. Could you maybe provide an isolated example? You can use https://stackblitz.com/

Best regards,
Siyana

@TsvetomirGT
Copy link
Author

Hello @s-todorova ,

Ive created a stackblitz example: Here

In the following example you can see the combobox component. Ive added a console log to the (selection-change) event. Also there is a noTypeahead property set to true.

  1. Type for example "Bulga", the dropdown will list "Bulgaria" and when you click it the event is fired.
  2. Reload the page
  3. Type "Bulgaria", the dropdown will list "Bulgaria" but when you click it the event is not firing anything.

There are other variations of the issue, for example if you type "Bulgaria " (with space after it), then delete the space and the dropdown will list again "Bulgaria". When you click it, again the event is not firing anything.

Hope this description is helpful.

Best regards,
Tsvetomir

@s-todorova
Copy link
Contributor

Thank you for providing a sample.

Hello @SAP/ui5-webcomponents-topic-rl ,
Issue is reproducible in the linked stackblitz example. Could you please take a look at this?

Best regards,
Siyana

@s-todorova s-todorova removed their assignment Nov 26, 2024
@StefanDimitrov04 StefanDimitrov04 self-assigned this Nov 27, 2024
@StefanDimitrov04 StefanDimitrov04 moved this from New Issues to In progress in Maintenance - Topic RL Nov 27, 2024
@StefanDimitrov04 StefanDimitrov04 mentioned this issue Dec 4, 2024
Closed
@StefanDimitrov04 StefanDimitrov04 removed their assignment Jan 6, 2025
@ivoplashkov ivoplashkov moved this from In progress to New Issues in Maintenance - Topic RL Jan 7, 2025
@nikoletavnv nikoletavnv self-assigned this Jan 8, 2025
@nikoletavnv nikoletavnv moved this from New Issues to In progress in Maintenance - Topic RL Jan 8, 2025
nikoletavnv added a commit that referenced this issue Jan 11, 2025
@nikoletavnv
fix(ui5-combobox): fire selection-change event when typed word fully …
c9882d2 
…matches item

Fixes #10239

When combobox is in noTypeahead mode, if the user writes a text that matches exactly
a list item, selection-change event was not fired if the user selects the item by
clicking on it.
Now the selection0change event fires when item text is exactly typed and
immediately selected from the items list.
@nikoletavnv nikoletavnv linked a pull request Jan 11, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nikoletavnv nikoletavnv

Labels
bug This issue is a bug in the code Medium Prio TOPIC RL
Projects
Maintenance - Topic RL
Status: In progress
Milestone
No milestone
4 participants
@TsvetomirGT @nikoletavnv @s-todorova @StefanDimitrov04