Tropix126 / fluent-svelte

A faithful implementation of Microsoft's Fluent Design System in Svelte.
https://fluent-svelte.vercel.app
MIT License
606 stars 26 forks source link

AutoSuggestBox - Various Details #47

Open JLAcostaEC opened 2 years ago

JLAcostaEC commented 2 years ago

Before you start...

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

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...

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

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