AutoSuggestBox - Various Details

[JLAcostaEC]

Before you start...

• Have you updated your dependencies? You might be using an old version of the library.
• Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Firefox, Chrome, Microsoft Edge, Firefox Beta/Dev/Nightly, Chrome Beta/Dev/Canary, Microsoft Edge Beta/Dev/Canary

Description

• Do not auto-select the first element of the array.

When AutoSuggestBox is rendered, by default the first array item option is selected by default. It is necessary to prevent this since if the first element is selected it will be impossible to get an event that notifies that the first option has been selected.

I think it could be corrected with:

/** Bindable index of the currently selected item. */
export let selection = -1;

However, some other method could be used that I don't imagine at the moment...

• Dispatch 'Select' Event does not make sure to update the current value of the AutoSuggestBox

When the 'select' event is fired, it doesn't make sure to update the current value of the AutoSuggestBox , as a result, the event sends the current value but the AutoSuggestBox element keeps the previous value, so calling event.target.value will return the previous value and not the selected/current one

• Adding the 'on:select' event on component allows better mobile performance

When using the component on mobile, it is much more difficult to fire the 'on:select' event since it is not included in the component, I guess it is because the event is not executed by a click, but rather it is executed by a touch . Carrying out some tests I was able to obtain good results by adding:

on:select={() => {
	if (open && matches.length > 0) value = matches[selection];
}}
on:select

... to the component wrapper.

//////

I'll be running various tests to improve overall performance, so I may submit a pull request regarding this.

Regards... :

Steps To Reproduce

1. Just try to select the first element and execute an function... you will not be able to get any event on it
2. On mobile/desktop select one element then select another and another and another, you will see that it will always be the previous value when the select/change/search event are fired.
3. Better mobile compatibility.

Expected behavior

1. Do not auto-select the first element of the array.
2. Dispatch 'Select' Event should make sure to update the current value of the AutoSuggestBox
3. Better performance on touch screens

Relevant Assets

No response