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.47k stars 254 forks source link

[Feature Request]: Suggestion list has tons of irrelevant suggestion list items in ui5-input and ui5-multi-input #8231

Open sanketzad opened 5 months ago

sanketzad commented 5 months ago

Feature Request Description

Impacted components : ui5-input & ui5-multi-input

Existing behaviour: After typing in the input box, suggestion popover opens with tons of irrelevant suggestion items

Please find the snippet below: ui5-input, this feature holds good for ui5-multi-input component as well.

image

Proposed Solution

To have this feature, we can introduce a property called Filter, which exists in ui5-combobox & ui5-multi-combobox components. The filter property has multiple options, like StartsWithPerTerm, StartsWith, Contains, and None.

This implementation would help the user narrow down the suggestion list items depending on the given requirement.

Proposed Alternatives

No response

Organization

No response

Additional Context

No response

Priority

None

Privacy Policy

yanaminkova commented 5 months ago

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

It seems that irrelevant suggestions are shown for the ui5-input component. Could be reproduced here: https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-input-suggestion-item--suggestion-item-overview Try to type any letter and observe that the shown suggestion items do not start with this specific letter, but it is included somewhere in the text.

I also noticed that if the component is used without the ui5-suggestion-group-item, the shown suggestion items are only the ones, which start with the typed letter. As it is in the following example: https://sap.github.io/ui5-webcomponents/playground/?path=/story/main-input--suggestions

So I am not sure whether this behavior is expected or not.

Could you please have a look at it?

Thanks and Best regards, Yana

elenastoyanovaa commented 5 months ago

Hello @sanketzad ,

Filtering in the ui5-input and the ui5-multi-input is meant to be done by the application, not by the component. You can check all samples in the storybook with suggestions. For example, for the Suggestions sample which perhaps you are referring you can see that the logic is to match items for containing the string value passed by the user. You can check the coding here: https://sap.github.io/ui5-webcomponents/playground/?path=/docs/main-input--input-overview ,scroll to the Suggestions sample and click on show code. If you want filtering with StartsWith or any other type you have the freedom to do so by following the same pattern shown in the sample and just adjusting the filtering logic. For example, you can check the grouping sample which @yanaminkova referred in her previous reply, where the filtering is done using the StartsWith strategy.

Please check my reply and close the issue if I answered your questions. If you insist that there should be a filter availability similar to the combobox and multicombobox coming from the component itself we will proceed with this as a feature request and evaluate further with design by following the FR process.

Kind Regards, Elena

sanketzad commented 5 months ago

Hi @elenastoyanovaa,

I do understand that the filtering logic is with the application team. But the idea here is to have a built-in filter property like that of ui5-combobox and/or ui5-multi-combobox that works out of the box for the application team. This is the exact requirement from the stakeholders: to keep input, multi-input, combobox, and multi-combobox in the same mode for filtering the items.

With regards, Sanket Zad

elenastoyanovaa commented 5 months ago

Hello colleagues,

The feature request is for providing a filtering built-in option for the ui5-input and ui5-multi-input similar to the existing in the ui5-combobox and ui5-multi-combobox.

Kind Regards, Elena

hristop commented 4 months ago

Internal BLI created: FIORITECHP1-29939