search

Lundalogik / lime-elements

Provides reusable web components for Lime CRM
https://lundalogik.github.io/lime-elements/versions/latest
Other
38 stars 12 forks source link

Show all completions in limel-input-field #3057

Open alexwero opened 3 days ago

alexwero commented 3 days ago

New feature motivation

We had to convert the VAT field in the CPQ add-on to a decimal input field, and we would like to have some fixed VAT levels as options. The completions property doesn't work the way we want, because you can only see the suggestion if it contains the number(s) you have typed. See the screen recording below (the completions in this example are set to 25.5, 12 and 6).

https://github.com/Lundalogik/lime-elements/assets/60968472/91187733-93de-428c-9081-71c3e848b6e5

New feature description

The completions should be visible at all times.

Kiarokh commented 1 day ago

This issue highlights an interaction design problem in how the list of suggestions are presented to the user.

It's perfectly fine to get less and less suggestions as you keep typing inside the input field (current behavior). However, it is not at all a great design when you do not see anything at all from the suggestions, if the field already has an input value.

Suggested solution:

When the input field has auto-completions, and there is already a value inside, show the dropdown (list of suggestions or auto-completions) once the user clicks/focuses the field again. This will help the user understand what are available or expected options.

Now if the user clicks on one of them, clear the old value and add the newly clicked value instead.

If the user starts typing or editing (backspacing, deleting, etc…) the current value, the dropdown should start filtering the suggestions again, as usual. Until the user clicks outside the dropdown to close it, and open it again. Then we should show all the available auto-complete suggestions again.