[AutoComplete] Close the dropdown via code

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -6063,6 +6063,12 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.ShouldRender">
             <summary />
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.CloseDropdownAsync">
+            <summary>
+            Closes the multiselect dropdown.
+            </summary>
+            <returns></returns>
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1.InputHandlerAsync(Microsoft.AspNetCore.Components.ChangeEventArgs)">
             <summary />
         </member>

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

@@ -26,6 +26,14 @@
     </Description>
 </DemoSection>
 
+<DemoSection Title="Close via code" Component="@typeof(AutocompleteCloseViaCode)">
+    <Description>
+        <p>
+            This example demonstrates how to close the dropdown in code.
+        </p>
+    </Description>
+</DemoSection>
+
 <h2 id="documentation">Documentation</h2>
 
 <ApiDocumentation Component="typeof(FluentAutocomplete<>)" GenericLabel="TOption" />

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

@@ -0,0 +1,51 @@
+@inject DataSource Data
+
+@inject IDialogService DialogService
+
+<FluentAutocomplete @ref=_autocomplete
+                    TOption="Country"
+                    AutoComplete="off"
+                    Autofocus="true"
+                    Label="Select a country"
+                    Width="250px"
+                    MaxAutoHeight="@(AutoHeight ? "200px" : null)"
+                    Placeholder="Select countries"
+                    OnOptionsSearch="@OnSearchAsync"
+                    OptionDisabled="@(e => e.Code == "au")"
+                    MaximumSelectedOptions="5"
+                    OptionText="@(item => item.Name)"
+                    @bind-SelectedOptions="@SelectedItems">
+    <FooterContent>
+        <FluentStack Orientation="Orientation.Horizontal"
+                     HorizontalAlignment="HorizontalAlignment.Right"
+                     Style="padding: 3px;">
+            <FluentButton OnClick="OpenDialog">
+                Show Dialog
+            </FluentButton>
+        </FluentStack>
+    </FooterContent>
+</FluentAutocomplete>
+
+<p>
+    <b>Selected</b>: @(String.Join(" - ", SelectedItems.Select(i => i.Name)))
+</p>
+
+@code
+{
+    FluentAutocomplete<Country> _autocomplete = default!;
+    bool AutoHeight = false;
+    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);
+    }
+
+    private async Task OpenDialog()
+    {
+        await _autocomplete.CloseDropdownAsync();
+        await DialogService.ShowInfoAsync("You pressed a button to open a dialog and close the dropdown.");
+    }
+}

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

@@ -280,6 +280,16 @@ private string ComponentWidth
     /// <summary />
     protected override bool ShouldRender() => _shouldRender;
 
+    /// <summary>
+    /// Closes the multiselect dropdown.
+    /// </summary>
+    /// <returns></returns>
+    public async Task CloseDropdownAsync()
+    {
+        IsMultiSelectOpened = false;
+        await InvokeAsync(StateHasChanged);
+    }
+
     /// <summary />
     protected override async Task InputHandlerAsync(ChangeEventArgs e)
     {

tests/Core/List/FluentAutocompleteTests.FluentAutocomplete_CloseManually-DropdownOpened.verified.razor.html

@@ -0,0 +1,21 @@
+
+<div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
+  <fluent-text-field style="width: 100%; min-width: 100%;" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="true" aria-controls="myAutocomplete-popup" aria-label="3-Bill Gates (1 of 3)" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
+    <svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" blazor:onkeydown="4" blazor:onclick="5" blazor:onfocus="6">
+      <title>Search</title>
+      <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 class="fluent-overlay" style="cursor: auto; position: fixed; display: flex; align-items: center; justify-content: center; z-index: 9900;" blazor:onclick="7" blazor:oncontextmenu="8" blazor:oncontextmenu:preventdefault="" b-xkrr7evqik="">
+    <div b-xkrr7evqik=""></div>
+  </div>
+  <fluent-anchored-region anchor="xxx" horizontal-positioning-mode="dynamic" horizontal-default-position="right" horizontal-inset="" horizontal-threshold="0" horizontal-scaling="content" vertical-positioning-mode="dynamic" vertical-default-position="unset" vertical-threshold="0" vertical-scaling="content" auto-update-mode="auto" style="z-index: 9999;" b-2ov9fhztky="" blazor:elementreference="xxx">
+    <div style="z-index: 9999; background-color: var(--neutral-layer-floating); box-shadow: var(--elevation-shadow-flyout); margin-top: 10px; border-radius: calc(var(--control-corner-radius) * 2px); background-color: var(--neutral-layer-floating);" b-2ov9fhztky="">
+      <div id="xxx" role="listbox" style="width: 100%;" tabindex="0" b-hg72r5b4ox="">
+        <fluent-option id="xxx" value="3-Bill Gates" blazor:onclick="9" aria-selected="true" selectable="" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
+        <fluent-option id="xxx" value="1-Denis Voituron" blazor:onclick="10" aria-selected="false" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
+        <fluent-option id="xxx" value="2-Vincent Baaij" blazor:onclick="11" aria-selected="false" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
+      </div>
+    </div>
+  </fluent-anchored-region>
+</div>

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

@@ -0,0 +1,9 @@
+
+<div class=" fluent-autocomplete-multiselect" style="width: 100%;" b-hg72r5b4ox="">
+  <fluent-text-field style="width: 100%; min-width: 100%;" id="xxx" value="" current-value="" appearance="outline" blazor:onchange="1" role="combobox" aria-expanded="false" aria-controls="" blazor:onclick="2" blazor:oninput="3" blazor:elementreference="">
+    <svg slot="end" style="width: 16px; fill: var(--accent-fill-rest); cursor: pointer;" focusable="true" tabindex="0" role="button" viewBox="0 0 16 16" blazor:onkeydown="4" blazor:onclick="5" blazor:onfocus="6">
+      <title>Search</title>
+      <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>

tests/Core/List/FluentAutocompleteTests.razor

@@ -430,6 +430,35 @@
         cut.Verify();
     }
 
+    [Fact]
+    public async Task FluentAutocomplete_CloseManually()
+    {
+        IEnumerable<Customer> SelectedItems = Array.Empty<Customer>();
+        FluentAutocomplete<Customer> autocomplete = default!;
+
+        // Arrange
+        var cut = Render<FluentAutocomplete<Customer>>(
+            @<FluentAutocomplete Id="myAutocomplete" TOption="Customer"
+                    @ref=autocomplete
+                    SelectValueOnTab="true"
+                    @bind-SelectedOptions="@SelectedItems"
+                    OnOptionsSearch="@OnSearchAsync" />
+    );
+
+        // Act: click to open -> KeyDow + Enter to select
+        var input = cut.Find("fluent-text-field");
+        input.Click();
+
+        // Verify that the dropdown is open
+        cut.Verify(suffix: "DropdownOpened");
+
+        // Close the dropdown
+        await autocomplete.CloseDropdownAsync();
+
+        // Verify that the dropdown is closed
+        cut.Verify();
+    }
+
     // Send a key code
     private async Task PressKeyAsync(IRenderedComponent<FluentAutocomplete<Customer>> cut, KeyCode key, bool popoverOpened = false)
     {