[AutoComplete] Enable "Multiple = false" when selecting a single item is desired

[StevenRasmussen]

Pull Request

📖 Description

When the MaximumSelectedOptions == 1, the control is rendered less than ideal due to the inherent nature that the control is expecting more than one item to be selected. This PR seeks to improve both the UI and UX of the FluentAutoComplete when only 1 item is desired.

🎫 Issues

Here is how the control renders like when the MaximumSelectedOptions == 1

Here is how the control renders with this PR:

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

• I have added a new component
• I have added Unit Tests for my new component
• I have modified an existing component
• I have validated the Unit Tests for an existing component

[MarvinKlein1508]

@StevenRasmussen wouldn't it make more sence to provide an itemprovider to the FluentCombobox ?
https://www.fluentui-blazor.net/Combobox

But I agree the current behaviour for single items within FluentAutocomplete could need some love :)

[StevenRasmussen]

@MarvinKlein1508 - That might work if you only have a small list of items. However, when working with large datasets and you want to be able to search/filter items then the AutoComplete allows you to do this with the OnOptionsSearch callback. I don't think the ComboBox provides this type of functionality OOB.

[dvoituron]

Two important points:

1. You cannot modify the code and adapt unit tests on existing components. Unit tests check that the result has not changed. For example, you may have modified the CSS class fluent-autocomplete-multiselect, which will impact hundreds of thousands of developers who may have customized the style. You can add features, but you can't remove or modify them without creating a breaking change.

2. This visual change for MaximumSelectedOptions=“1” makes the code incompatible with Accessibility.
   Before
   
   After
   

[StevenRasmussen]

@dvoituron - Thanks for the feedback :). Regarding your points:

1. I will update the PR so that this will no longer be the case. The PR was aiming at "ideal" changes to the naming... however I will make it so that it will be backwards compatible and not break existing customizations of the class.
2. I'm not really all that familiar with how to make the component compatible with Accessibility. Assuming I fix item 1 above, do you have any pointers and what needs to change to make it compatible?

[dvoituron]

2. I'm not really all that familiar with how to make the component compatible with Accessibility. Assuming I fix item 1 above, do you have any pointers and what needs to change to make it compatible?

Here are a few websites to explain Accessibility:

• https://learn.microsoft.com/en-us/microsoft-edge/accessibility/design
• https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Accessibility/What_is_accessibility

The best solution is to use a tool such as NVDA to validate the result.

[StevenRasmussen]

@dvoituron - Thanks for the pointers regarding accessibility. I introduced changes that I believe have addressed your concern. That being said, I feel a bit like I'm blindfolded and trying to hit a dart board... I'm not quite sure what an acceptable solution is for accessibility. Please let me know if additional changes need to be made, otherwise I feel like the PR is ready for review again. Thanks!

[StevenRasmussen]

@dvoituron - I wanted to check-in to see if you needed any additional changes to this PR. Thanks!

[dvoituron]

This seems good. Small syntax change and I'll check the working component

[StevenRasmussen]

@dvoituron, @vnbaaij - Thanks for your consideration on this. I think the community is going to appreciate this enhancement 😄

[Trapulo]

just implemented the new version: it solves a lot of problems, thanks

[MarvinKlein1508]

@StevenRasmussen is there any easy way to allow the user to set the selection back to null/empty when he hits the delete/backspace key?

[xebamart]

In version 4.11.9, when the FluentAutocomplete component sets the Multiple=false parameter, the following error occurs:

Unable to set property 'Multiple' on object of type 'Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1[[Reprehendo.Dtos.ScadaGroupDto, Reprehendo.Dtos, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]]'. The error was: For FluentAutocomplete, this property must be True. Set the MaximumSelectedOptions property to 1 to select just one item.

Code example:

          <FluentAutocomplete TOption="ScadaGroupDto"
                                AutoComplete="off"
                                Autofocus="true"
                                Label="Select a country"
                                Width="250px"
                                Placeholder="Select a country"
                                OnOptionsSearch="@OnSearchScadaGroup"
                                Multiple="false"
                                OptionText="@(item => item.Title)"
                                @bind-SelectedOption=_selectedScadaGroup />

Is this already resolved?

[dvoituron]

In version 4.11.9, when the FluentAutocomplete component sets the Multiple=false parameter, the following error occurs:

The latest version supports `Multiple=false" : you have a live example here.
https://www.fluentui-blazor.net/Autocomplete#multiplefalse

[xebamart]

Well it doesn't work when I replicate it in my solution.

[vnbaaij]

Well it doesn't work when I replicate it in my solution.

If you are 100% sure you are using the correct version, then please create a new issue (with ready to run reproduction code) for this.

[xebamart]

    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.5" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.5" PrivateAssets="all" />
    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="4.11.9" />
    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="4.11.9" />

[MarvinKlein1508]

@xebamart can you please create a new issue and provide a ready to tun repository?

[StevenRasmussen]

@StevenRasmussen is there any easy way to allow the user to set the selection back to null/empty when he hits the delete/backspace key?

@MarvinKlein1508 - You can unselect an option by tabbing to the X and hitting the Enter key:

It could be a good enhancement to add support for the DELETE or BACKSPACE keyboard keys too though.

[xebamart]

In version 4.12.0 it works correctly.