Improved AutoSuggessBox & Prevent Close of Flyout

Tropix126 / fluent-svelte

A faithful implementation of Microsoft's Fluent Design System in Svelte.

https://fluent-svelte.vercel.app

MIT License

614 stars 27 forks source link

Improved AutoSuggessBox & Prevent Close of Flyout #50

Closed JLAcostaEC closed 1 year ago

JLAcostaEC commented 2 years ago

Considering #47

1. AutoSuggessBox.

[x] Do not auto-select the first element of the array.

Now if the user select the first element, all the events will return the value of Array[0]

[x] Dispatch 'Select' Event does not make sure to update the current value of the AutoSuggestBox

Fixed and now we will get the updated value.

[x] Adding the 'on:select' event on component allows better mobile performance

Added on select event,

[x] Don't auto select any element for just use the arrow key moving

Selections will be triggered with Enter key when focused on an item

2. Flyout

[x] Don't auto close the flyout when push Enter key

vercel[bot] commented 2 years ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
fluent-svelte	❌ Failed (Inspect)		Jun 2, 2022 at 7:25PM (UTC)

Tropix126 commented 2 years ago

I'll take some time later to look over some changes, although just as an initial thought I think that arrow keys should still move selection as to mirror the behavior of the native control. AutoSuggestBox has probably given me the most trouble out of any of the components in terms of behavior due to how inconsistently it tends to behave, so i'll have to think some things through. 👍

JLAcostaEC commented 2 years ago

I agree that the AutoSuggestBox is quite a complex component. And yes, come to think of it, in certain cases it should auto-select with the arrow keys. What do you think about an optional prop? <AutoSuggestBox enableAutoSelect={true} /> or something like that?