Add Autocomplete.KeepOpen (#2829)

microsoft · Oct 18, 2024 · b53390a · b53390a
1 parent e303540
commit b53390a
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 4 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -5660,6 +5660,12 @@
             Default is false.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.KeepOpen">
+            <summary>
+            Gets or sets whether the drop-down panel stays open after selecting an item,
+            until the number of selected items reaches the maximum (only using the mouse).
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.ListStyleValue">
             <summary />
         </member>
@@ -5714,6 +5720,9 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.RaiseValueTextChangedAsync(System.String)">
             <summary />
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.MustBeClosed">
+            <summary />
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1.LibraryConfiguration">
             <summary />
         </member>

diff --git a/examples/Demo/Shared/Pages/List/Autocomplete/Examples/AutocompleteCustomized.razor b/examples/Demo/Shared/Pages/List/Autocomplete/Examples/AutocompleteCustomized.razor
@@ -7,6 +7,7 @@
                     Placeholder="search"
                     OnOptionsSearch="@OnSearch"
                     MaximumSelectedOptions="3"
+                    KeepOpen="true"
                     OptionText="@(item => item.FirstName)"
                     OptionStyle="min-height: 40px;"
                     @bind-SelectedOptions="@SelectedItems">

diff --git a/src/Core/Components/List/FluentAutocomplete.razor.cs b/src/Core/Components/List/FluentAutocomplete.razor.cs
@@ -224,6 +224,13 @@ public override bool Multiple
     [Parameter]
     public bool SelectValueOnTab { get; set; } = false;
 
+    /// <summary>
+    /// Gets or sets whether the drop-down panel stays open after selecting an item,
+    /// until the number of selected items reaches the maximum (only using the mouse).
+    /// </summary>
+    [Parameter]
+    public bool KeepOpen { get; set; } = false;
+
     /// <summary />
     private string? ListStyleValue => new StyleBuilder()
         .AddStyle("width", Width, when: !string.IsNullOrEmpty(Width))
@@ -287,6 +294,7 @@ protected override async Task InputHandlerAsync(ChangeEventArgs e)
         if (MaximumSelectedOptions > 0 && SelectedOptions?.Count() >= MaximumSelectedOptions)
         {
             IsReachedMaxItems = true;
+            RenderComponent();
             return;
         }
 
@@ -319,8 +327,14 @@ protected override async Task InputHandlerAsync(ChangeEventArgs e)
             await VirtualizationContainer.RefreshDataAsync();
         }
 
-        _shouldRender = true;
-        StateHasChanged();
+        RenderComponent();
+
+        // Activate the rendering
+        void RenderComponent()
+        {
+            _shouldRender = true;
+            StateHasChanged();
+        }
     }
 
     private ValueTask<ItemsProviderResult<TOption>> LoadFilteredItemsAsync(ItemsProviderRequest request)
@@ -534,9 +548,13 @@ protected override async Task OnSelectedItemChangedHandlerAsync(TOption? item)
         ValueText = string.Empty;
         await RaiseValueTextChangedAsync(ValueText);
 
-        IsMultiSelectOpened = false;
         await base.OnSelectedItemChangedHandlerAsync(item);
         await DisplayLastSelectedItemAsync();
+
+        if (MustBeClosed())
+        {
+            IsMultiSelectOpened = false;
+        }
     }
 
     /// <summary />
@@ -619,4 +637,25 @@ private async Task RaiseValueTextChangedAsync(string value)
         }
 
     }
+
+    /// <summary />
+    private bool MustBeClosed()
+    {
+        if (KeepOpen == false)
+        {
+            return true;
+        }
+
+        if (MaximumSelectedOptions is null || MaximumSelectedOptions <= 1)
+        {
+            return true;
+        }
+
+        if (MaximumSelectedOptions > 0 && _selectedOptions.Count >= MaximumSelectedOptions)
+        {
+            return true;
+        }
+
+        return false;
+    }
 }
diff --git a/src/Core/Components/List/ListComponentBase.razor.cs b/src/Core/Components/List/ListComponentBase.razor.cs
@@ -22,7 +22,7 @@ public abstract partial class ListComponentBase<TOption> : FluentInputBase<strin
 
     private bool _multiple = false;
     private bool _hasInitializedParameters;
-    private List<TOption> _selectedOptions = [];
+    protected List<TOption> _selectedOptions = [];
     protected TOption? _currentSelectedOption;
     protected readonly RenderFragment _renderOptions;