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

examples/Demo/Shared/Pages/List/Autocomplete/AutocompletePage.razor

@@ -18,6 +18,8 @@
 
 <DemoSection Title="Customized options" Component="@typeof(AutocompleteCustomized)" />
 
+<DemoSection Title="Max Selected Items == 1" Component="@typeof(AutoCompleteMaxSingleItem)" />
+
 <DemoSection Title="Many Items" Component="@typeof(AutocompleteManyItems)">
     <Description>
         <p>

examples/Demo/Shared/Pages/List/Autocomplete/Examples/AutoCompleteMaxSingleItem.razor

@@ -0,0 +1,29 @@
+@inject DataSource Data
+
+<FluentAutocomplete TOption="Country"
+                    AutoComplete="off"
+                    Autofocus="true"
+                    Label="Select a country"
+                    Width="250px"
+                    Placeholder="Select a country"
+                    OnOptionsSearch="@OnSearchAsync"
+                    OptionDisabled="@(e => e.Code == "au")"
+                    MaximumSelectedOptions="1"
+                    OptionText="@(item => item.Name)"
+                    @bind-SelectedOptions="@SelectedItems" />
+
+<p>
+    <b>Selected</b>: @(String.Join(" - ", SelectedItems.Select(i => i.Name)))
+</p>
+
+@code
+{
+    IEnumerable<Country> SelectedItems = Array.Empty<Country>();
+
+    private async Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
+    {
+        var allCountries = await Data.GetCountriesAsync();
+        e.Items = allCountries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
+                              .OrderBy(i => i.Name);
+    }
+}

src/Core/Components/List/FluentAutocomplete.razor

@@ -3,7 +3,7 @@
 @typeparam TOption
 
 <CascadingValue Value="@_internalListContext" Name="ListContext" TValue="InternalListContext<TOption>" IsFixed=true>
-    <div class="@ClassValue fluent-autocomplete-multiselect"
+    <div class="@ClassValue fluent-autocomplete-multiselect @PartialClassValue"
          style="@StyleValue"
          @attributes="AdditionalAttributes"
          auto-height="@(!string.IsNullOrEmpty(MaxAutoHeight))">
@@ -204,7 +204,11 @@
                 {
                     var text = @GetOptionText(item);
 
-                    if (ReadOnly || Disabled)
+                    if (MaximumSelectedOptions == 1)
+                    {
+                        <FluentLabel>@text</FluentLabel>
+                    }
+                    else if (ReadOnly || Disabled)
                     {
                         <FluentBadge Appearance="@AspNetCore.Components.Appearance.Neutral"
                                      aria-label="@GetOptionText(item)">

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

@@ -239,6 +239,9 @@ public override bool Multiple
         .AddStyle("display", "none", when: (Items == null || !Items.Any()) && (HeaderContent != null || FooterContent != null))
         .Build();
 
+    private string PartialClassValue => (MaximumSelectedOptions == 1 ? " singleselect" : "")
+        + (SelectedOptions?.Count() > 0 ? " item-selected" : "");
+
     /// <summary />
     private string ComponentWidth
     {

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

@@ -52,15 +52,19 @@
     margin-bottom: 2px;
 }
 
+.fluent-autocomplete-multiselect.singleselect.item-selected ::deep fluent-text-field::part(control) {
+    display: none;
+}
+
 @media (forced-colors: active) {
 
     .fluent-autocomplete-multiselect div[role=listbox] {
         border: calc(var(--stroke-width)* 1px) solid transparent;
     }
 
-    .fluent-autocomplete-multiselect div[role=listbox] ::deep fluent-option:not([disabled]):not([selected])[selectable] {
-        forced-color-adjust: none;
-        background: highlight;
-        color: highlighttext;
-    }
+        .fluent-autocomplete-multiselect div[role=listbox] ::deep fluent-option:not([disabled]):not([selected])[selectable] {
+            forced-color-adjust: none;
+            background: highlight;
+            color: highlighttext;
+        }
 }

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_AutofocusAttribute.verified.razor.html

@@ -6,4 +6,4 @@
       <path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
     </svg>
   </fluent-text-field>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Empty.verified.razor.html

@@ -6,4 +6,4 @@
       <path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
     </svg>
   </fluent-text-field>
-</div>
+</div>

tests/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="">
   <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="2-Vincent Baaij (2 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
@@ -36,4 +36,4 @@
       </div>
     </div>
   </fluent-anchored-region>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Keyboard-ArrowUp.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="">
   <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
@@ -36,4 +36,4 @@
       </div>
     </div>
   </fluent-anchored-region>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Keyboard-Backspace.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="">
   <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="1-Denis Voituron (1 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
@@ -36,4 +36,4 @@
       </div>
     </div>
   </fluent-anchored-region>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Keyboard-Escape.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="">
   <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" aria-label="Selected 1-Denis Voituron, 2-Vincent Baaij" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
@@ -24,4 +24,4 @@
       <path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
     </svg>
   </fluent-text-field>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_MaxAutoHeight_Opened.verified.razor.html

@@ -1,5 +1,5 @@
 
-<div class=" fluent-autocomplete-multiselect" style="width: 100%;" auto-height="" b-hg72r5b4ox="">
+<div class=" fluent-autocomplete-multiselect item-selected" style="width: 100%;" auto-height="" b-hg72r5b4ox="">
   <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="No items found" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <div id="xxx" slot="start" class="auto-height" style="max-height: 200px;" b-hg72r5b4ox="">
       <fluent-badge id="xxx" appearance="neutral" blazor:onclick="4" aria-label="1-Denis Voituron" blazor:elementreference="">
@@ -30,4 +30,4 @@
       <div id="xxx" role="listbox" style="width: 100%;" tabindex="0" b-hg72r5b4ox=""></div>
     </div>
   </fluent-anchored-region>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_MaxSelectedOptionsEqualTo1.verified.razor.html

@@ -0,0 +1,20 @@
+
+<div class=" fluent-autocomplete-multiselect item-selected" style="width: 100%;" b-hg72r5b4ox="">
+  <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" aria-label="Selected 1-Denis Voituron" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="xxx">
+    <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
+      <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
+      <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToNext();" slot="next-flipper" aria-hidden="false" aria-label="Next" title="Next" role="button" tabindex="0" class="next fluent-autocomplete-next" direction="next" b-hg72r5b4ox=""></fluent-flipper>
+      <fluent-badge id="xxx" appearance="neutral" blazor:onclick="4" aria-label="1-Denis Voituron" blazor:elementreference="xxx">
+        <span style="width: 100%; display: flex; align-items: center; justify-content: center; white-space: nowrap;">1-Denis Voituron<svg style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer; margin: 2px 0px 0px 2px;" focusable="true" tabindex="0" role="button" viewBox="0 0 24 24" blazor:onkeydown="8" blazor:onclick="9">
+            <title>Remove 1-Denis Voituron</title>
+            <path d="m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z"></path>
+          </svg>
+        </span>
+      </fluent-badge>
+    </fluent-horizontal-scroll>
+    <svg slot="end" style="width: 12px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" blazor:onkeydown="5" blazor:onclick="6" blazor:onfocus="7">
+      <title>Clear</title>
+      <path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
+    </svg>
+  </fluent-text-field>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Name.verified.razor.html

@@ -6,4 +6,4 @@
       <path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
     </svg>
   </fluent-text-field>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_OnClearWithOverlayHiddenOnEmpty_HasNoOverlay.verified.razor.html

@@ -6,4 +6,4 @@
       <path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
     </svg>
   </fluent-text-field>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_OnClear_ShowOverlay.verified.razor.html

@@ -14,4 +14,4 @@
       <div id="xxx" role="listbox" style="width: 100%;" tabindex="0" b-hg72r5b4ox=""></div>
     </div>
   </fluent-anchored-region>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Opened.verified.razor.html

@@ -18,4 +18,4 @@
       </div>
     </div>
   </fluent-anchored-region>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_SelectedOptions.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="">
   <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="Denis Voituron (1 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
@@ -36,4 +36,4 @@
       </div>
     </div>
   </fluent-anchored-region>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_SelectedOptions_OnDismissClick.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="">
   <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="Denis Voituron (1 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
@@ -36,4 +36,4 @@
       </div>
     </div>
   </fluent-anchored-region>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_SelectedOptions_Template.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="">
   <fluent-text-field style="width: 100%; min-width: 100%;" placeholder="" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myComponent-popup" aria-label="Denis Voituron (1 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
     <fluent-horizontal-scroll id="xxx" style="width: 100%;" slot="start" b-hg72r5b4ox="">
       <fluent-flipper onclick="event.stopPropagation(); document.getElementById('myComponent-scroll').scrollToPrevious();" slot="previous-flipper" aria-hidden="false" aria-label="Previous" title="Previous" role="button" tabindex="0" class="previous fluent-autocomplete-previous" direction="previous" b-hg72r5b4ox=""></fluent-flipper>
@@ -42,4 +42,4 @@
       </div>
     </div>
   </fluent-anchored-region>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Templates.verified.razor.html

@@ -26,4 +26,4 @@
       <footer>3 items found</footer>
     </div>
   </fluent-anchored-region>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_ValueText.verified.razor.html

@@ -6,4 +6,4 @@
       <path d="m2.59 2.72.06-.07a.5.5 0 0 1 .63-.06l.07.06L8 7.29l4.65-4.64a.5.5 0 0 1 .7.7L8.71 8l4.64 4.65c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L8 8.71l-4.65 4.64a.5.5 0 0 1-.7-.7L7.29 8 2.65 3.35a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
     </svg>
   </fluent-text-field>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_ValueText_Clears.verified.razor.html

@@ -14,4 +14,4 @@
       <div id="xxx" role="listbox" style="width: 100%;" tabindex="0" b-hg72r5b4ox=""></div>
     </div>
   </fluent-anchored-region>
-</div>
+</div>

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_Width_Empty.verified.razor.html

@@ -6,4 +6,4 @@
       <path d="M9.1 10.17a4.5 4.5 0 1 1 1.06-1.06l3.62 3.61a.75.75 0 1 1-1.06 1.06l-3.61-3.61Zm.4-3.67a3 3 0 1 0-6 0 3 3 0 0 0 6 0Z"></path>
     </svg>
   </fluent-text-field>
-</div>
+</div>