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.58k stars 269 forks source link

[component name | framework | build | icons | theming | localization | i18n | typescript]:Input #10231

Closed Garima123639 closed 4 days ago

Garima123639 commented 4 days ago

Bug Description

onSelect event handler doesn't work as expected. It should ideally be fired when the user selects the element from the suggested items in the dropdown through either the keyboard enter or click but its not fired. Also onSelectionChange is fired everytime you press any keydown in the suggested dropdown so that could not be used. onSelect should be able to do the same task as onSuggestionItemSelect from the previous version but its not doing

Affected Component

Input

Expected Behaviour

onSelect should be able to do the same task as onSuggestionItemSelect from the previous version but its not doing

Isolated Example

No response

Steps to Reproduce

  1. Use Input component with onSelect and having showSuggestions set to true.
  2. Select something from the suggestions either through keyboard down key and press enter or directly mouse click
  3. the handler assigned to onSelect is not fired appropriately ...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

Version 2

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

ivoplashkov commented 4 days ago

Hello @Garima123639,

Thank you for reporting the issue.

We would like to clarify the behavior of the events:

  1. select: This is an event triggered when the user selects text within the input field. It is not intended for handling dropdown item selection. - https://sap.github.io/ui5-webcomponents/components/Input/#select
  2. selection-change: This is triggered whenever the user navigates through suggestions (e.g., using arrow keys). It is designed for previewing items and is not equivalent to final selection. - https://sap.github.io/ui5-webcomponents/components/Input/#selection-change

For detecting the final selection of a dropdown item (via Enter or click), please use input event. This will provide the desired behavior, as the event is fired when the value of the component changes at each keystroke, and when a suggestion item has been selected.

Hope this helps!

Best regards, Ivaylo

Garima123639 commented 23 hours ago

In the previous version there was a handler onSuggestionItemSelect, which was fired when the item from the suggestion item is selected. In our case when we type something in the input field then we fire an api call which will fetch the matching suggestion results to be shown. Now from those suggestions if I select something then we need a separate handler for that and we can't use same onInput handler as that is gonna handle separate functionality. So here we need a handler which could specifically be fired when the suggestion item is selected. As this is gonna be functionality loss otherwise, request you to please look into this and solve the issue