FluentAutoComplete: Single item enhancements #3571

StevenRasmussen · 2025-03-24T15:49:00Z

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

…ue to the class change.

MarvinKlein1508 · 2025-03-24T15:53:21Z

@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 · 2025-03-24T16:37:05Z

@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 · 2025-03-24T17:09:06Z

Two important points:

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.
This visual change for MaximumSelectedOptions=“1” makes the code incompatible with Accessibility.
Before

After

StevenRasmussen · 2025-03-24T17:15:19Z

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

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

…epending on the current name.

StevenRasmussen · 2025-03-25T00:08:38Z

.../Core/List/FluentAutocompleteTests.FluentAutocomplete_Keyboard-ArrowDown.verified.razor.html

@@ -1,5 +1,5 @@

-<div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
+<div class=" fluent-autocomplete-multiselect item-selected" style="width: 100%;" b-hg72r5b4ox="">


@dvoituron - Is this an acceptable modification to the logic and thus the unit test? A new class is being added if the count of the SelectedOptions > 0. This shouldn't break anyone since the main class name is un-changed.

Nop. It's not acceptable to change all Unit Tests.
You can do the "inverse": you can add an attribute single-selection only for you feature. And adapt the CSS in this case= .fluent-autocomplete-multiselect[single-selection] { ... }

<div class="fluent-autocomplete-multiselect" single-selection> ...

StevenRasmussen · 2025-03-25T01:31:19Z

src/Core/Components/List/FluentAutocomplete.razor

-                    if (ReadOnly || Disabled)
+                    if (MaximumSelectedOptions == 1)
+                    {
+                        <FluentLabel aria-label="@GetOptionText(item)" role="checkbox" aria-checked="true">@text</FluentLabel>


@dvoituron - I'm not sure if you think it appropriate to include a tab stop here or not. I left it out but could add it back in if you like.

@dvoituron - I believe adding the tab stop is what you are looking for as far as accessibility goes. I have added it so that you can see what the result is. Let me know if you still want other changes or if you still think we should pursue allowing Multiple = false;

I'll check this out, but having a Multiple=false is still useful for people who want to keep the previous behavior.

StevenRasmussen · 2025-03-25T01:33:05Z

src/Core/Components/List/FluentAutocomplete.razor

@@ -79,7 +79,7 @@
                                    Width="12px"
                                    Style="cursor: pointer;"
                                    Slot="end"
-                                    Title="@AccessibilityIconDismiss"
+                                    Title="@(MaximumSelectedOptions == 1 ? string.Format(AccessibilityRemoveItem, GetOptionText(SelectedOption)) : AccessibilityIconDismiss)"


@dvoituron - When this is a single select (MaximumSelectedOptions == 1) then the accessibility text for the Clear button becomes the AccessibilityRemoveItem text which is something like Remove {0}.

Why did you change the current Title result: DismissTitle="@(string.Format(AccessibilityRemoveItem, text))" ?

This was an attempt to improve the "accessibility" of the component. Since you can no longer remove the individual item, I felt it might be good for the 'Clear' button to include the name of the selected option and so I just updated it to use the same text as if you were removing a single item. I'm happy to change it back if you don't feel like this is a helpful update.

It's an option to add additional information in this case. But my biggest accessibility problem is that the component must “read” (with NVDA) all the elements present on the screen. This is still not the case when an item is selected, the user must be able to position himself on the component (focusable) and NVDA must announce something like “ selected”.

To move forward with this PR (and to be compatible with what already exists), it would probably be simpler to allow the Multiple=false parameter, which would activate your functionality. If Multiple=true, everything would work as it does now, and Accessibility would be compatbile.

What do you think about this idea?

I tried this by making the following changes:

However, the control did not seem to work. It wouldn't allow me to select anything. I'm not opposed to this idea, I'm just not sure what else would be required to get it to work. At the end of the day, I'm simply looking for a way to only allow a single item to be selected and also have the UI styled in such a way that is optimal for a single item. As it stands, I believe this PR accomplishes that and does it in a way that does not break anything existing and is hopefully acceptable from an accessibility perspective with the latest change I pushed.

dvoituron · 2025-03-25T07:59:58Z

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:

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

StevenRasmussen · 2025-03-25T14:00:19Z

@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 · 2025-03-31T14:13:09Z

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

src/Core/Components/List/FluentAutocomplete.razor.cs

dvoituron · 2025-04-02T07:50:00Z

src/Core/Components/List/FluentAutocomplete.razor

@@ -79,7 +79,7 @@
                                    Width="12px"
                                    Style="cursor: pointer;"
                                    Slot="end"
-                                    Title="@AccessibilityIconDismiss"
+                                    Title="@(MaximumSelectedOptions == 1 ? string.Format(AccessibilityRemoveItem, GetOptionText(SelectedOption)) : AccessibilityIconDismiss)"


It's an option to add additional information in this case. But my biggest accessibility problem is that the component must “read” (with NVDA) all the elements present on the screen. This is still not the case when an item is selected, the user must be able to position himself on the component (focusable) and NVDA must announce something like “ selected”.

To move forward with this PR (and to be compatible with what already exists), it would probably be simpler to allow the Multiple=false parameter, which would activate your functionality. If Multiple=true, everything would work as it does now, and Accessibility would be compatbile.

dvoituron · 2025-04-02T07:53:26Z

src/Core/Components/List/FluentAutocomplete.razor.cs

+            && SelectedOptions?.Count() > 0
+            && !(AdditionalAttributes?.TryGetValue("single-select", out var isSingleSelect) ?? false))
+        {
+            var additionalAttributes = (AdditionalAttributes is not null)


You don't need to update the AdditionalAttributes. You can add an attribute in the razor file like this:

<FluentTextField role="combobox" single-select="@GetSingleSelect()" ... >

private bool GetSingleSelect() => MaximumSelectedOptions == 1 && SelectedOptions?.Any() && Multiple == false;

…f directly putting the attribute on the element and evaluating with a function.

Trapulo · 2025-04-04T16:50:33Z

With this improvement (thanks! really important) Is there also a way to have a two-way simple binding to one single object it MaximumSelectedOptions = 1 to perform a simple two-way binding to an object's property referring to the selected object?

dvoituron · 2025-04-13T20:56:01Z

With this improvement (thanks! really important) Is there also a way to have a two-way simple binding to one single object it MaximumSelectedOptions = 1 to perform a simple two-way binding to an object's property referring to the selected object?

No. By default, this component is dedicated to bind multiple items. Including when you set MaximumSelectedOptions=1

StevenRasmussen added 3 commits March 24, 2025 08:44

Autocomplete working with single item selected.

3288027

Added a unit test and updated the results of the failing unit tests d…

2ad0c86

…ue to the class change.

Fixed whitespace issues.

f3c4199

StevenRasmussen requested review from vnbaaij and dvoituron as code owners March 24, 2025 15:49

StevenRasmussen added 3 commits March 24, 2025 18:03

Updates to demo page.

5b0f2f2

Revert changes to class names so that it won't break anyone that is d…

f9fdad0

…epending on the current name.

Revert change to css.

5b2dfa4

StevenRasmussen commented Mar 25, 2025

View reviewed changes

Accessibility changes.

f398a40

StevenRasmussen commented Mar 25, 2025

View reviewed changes

StevenRasmussen added 3 commits March 25, 2025 07:45

Updated to use a new attribute instead of a new class.

1d01ba0

Fix unit tests.

b3df6a2

Fix whitespace change.

aee8b20

StevenRasmussen added 2 commits March 25, 2025 09:09

Reverted test files to remove noise from PR.

2e2c523

Fixed an issue with really long text

3645b30

dvoituron requested changes Apr 2, 2025

View reviewed changes

StevenRasmussen added 5 commits April 2, 2025 22:21

Merge branch 'dev' into auto-complete-single-item-enhancements

2144040

Improve performance of line of code.

cf780ac

Removed the usage of addiing to the 'AdditionalAttributes' in favor o…

fa6034c

…f directly putting the attribute on the element and evaluating with a function.

Added the tab stop for accessibility.

0b8509d

Fixed broken unit test after adding in the tabindex property.

4b0d6c0

StevenRasmussen requested a review from dvoituron April 3, 2025 05:17

Merge branch 'dev' into auto-complete-single-item-enhancements

9a92440

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FluentAutoComplete: Single item enhancements #3571

FluentAutoComplete: Single item enhancements #3571

StevenRasmussen commented Mar 24, 2025

MarvinKlein1508 commented Mar 24, 2025

StevenRasmussen commented Mar 24, 2025

dvoituron commented Mar 24, 2025

StevenRasmussen commented Mar 24, 2025

StevenRasmussen Mar 25, 2025

dvoituron Mar 25, 2025

StevenRasmussen Mar 25, 2025

StevenRasmussen Apr 3, 2025

dvoituron Apr 3, 2025

StevenRasmussen Mar 25, 2025

dvoituron Mar 25, 2025

StevenRasmussen Mar 25, 2025

dvoituron Apr 2, 2025

dvoituron Apr 13, 2025

StevenRasmussen Apr 14, 2025

dvoituron commented Mar 25, 2025

StevenRasmussen commented Mar 25, 2025

StevenRasmussen commented Mar 31, 2025

dvoituron Apr 2, 2025

dvoituron Apr 2, 2025

StevenRasmussen Apr 3, 2025

Trapulo commented Apr 4, 2025

dvoituron commented Apr 13, 2025 •

edited

Loading

		@@ -1,5 +1,5 @@

		<div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
		<div class=" fluent-autocomplete-multiselect item-selected" style="width: 100%;" b-hg72r5b4ox="">

FluentAutoComplete: Single item enhancements #3571

Are you sure you want to change the base?

FluentAutoComplete: Single item enhancements #3571

Conversation

StevenRasmussen commented Mar 24, 2025

Pull Request

📖 Description

🎫 Issues

✅ Checklist

General

Component-specific

MarvinKlein1508 commented Mar 24, 2025

StevenRasmussen commented Mar 24, 2025

dvoituron commented Mar 24, 2025

StevenRasmussen commented Mar 24, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dvoituron commented Mar 25, 2025

StevenRasmussen commented Mar 25, 2025

StevenRasmussen commented Mar 31, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Trapulo commented Apr 4, 2025

dvoituron commented Apr 13, 2025 • edited Loading

dvoituron commented Apr 13, 2025 •

edited

Loading