feat: add keyboard support to FluentAutoComplete in single-mode to delete selection

[MarvinKlein1508]

🙋 Feature Request

The PR #3571 added real single-mode to the FluentAutoComplete component by @StevenRasmussen

Once you have made a selection there is no way to unselect the selection via keyboard again. The old way allowed to remove the item via backspace key or via a click on the x on the selected item or when the same item has been selected again. None of these ways is possible anymore when using single-mode.

🤔 Expected Behavior

I expect the component to remove the selection via backspace, delete and when the user unselects the same item again.

😯 Current Behavior

None of these way is possible anymore when using single-mode.

💻 Examples

See Multiple == false:
https://www.fluentui-blazor.net/Autocomplete

[MarvinKlein1508]

@StevenRasmussen do you see any easy way to prevent stuff like this as well?

I cannot tell you how often I have to tell my users that it is not a valid input here.

[StevenRasmussen]

Maybe we remove the invalid text when focus is lost from the input?

[vnbaaij]

I've labeled this with 'community contribution' as I expect (hope) you to come up with a solution (and a PR) for this

[MarvinKlein1508]

Maybe we remove the invalid text when focus is lost from the input?

This isn't as simple as it sounds because the control will lose it'S focus when you navigate through the elements in the list by keyboard or when you try to click at one.

[Tyme-Bleyaert]

I would like to give this a crack if you guys don't mind.

[vnbaaij]

@Tyme-Bleyaert Absolutely. Have a go at it. I'll assign this to you

[Tyme-Bleyaert]

Ok, i think i got most things covered, only the following use case i need to work out:
When a user selected a value, typed something extra after the value or typed invalid words.
In the current case it will jump back to that last selected value. But maybe it would be better to clear the selected value when the value text no longer matches the last selected value.

What do you guys think?

[MarvinKlein1508]

I agree. What about you @vnbaaij ?

[vnbaaij]

When a user selected a value, typed something extra after the value or typed invalid words.
In the current case it will jump back to that last selected value.

And what about if a user deletes some chars from the beginning of the value? Can the last selected value than still be determined? Think going back to a blank solves a lot of ambiguity errors that can come of this

[Tyme-Bleyaert]

And what about if a user deletes some chars from the beginning of the value? Can the last selected value than still be determined? Think going back to a blank solves a lot of ambiguity errors that can come of this

As long as the text matches the first item in the list it will reselect the item yes.
I will continue working on it this weekend, as i did not have the time yet to do so.