[FluentCombobox] Add EnableClickToClose (#3186)

* Add EnableClickToClose option to FluentCombobox for dropdown toggle control

* [FluentCombobox] Add EnableClickToClose for dropdown list

Author: hml-coder

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

@@ -5941,6 +5941,11 @@
             Gets or sets the open attribute.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1.EnableClickToClose">
+            <summary>
+            Gets or sets the option to allow closing the FluentCombobox list by clicking the dropdown button. Default is false.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1.Position">
             <summary>
             Gets or sets the placement for the listbox when the combobox is open.

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

@@ -10,7 +10,7 @@
 namespace Microsoft.FluentUI.AspNetCore.Components;
 
 [CascadingTypeParameter(nameof(TOption))]
-public partial class FluentCombobox<TOption> : ListComponentBase<TOption> where TOption : notnull
+public partial class FluentCombobox<TOption> : ListComponentBase<TOption>, IAsyncDisposable where TOption : notnull
 {
     private const string JAVASCRIPT_FILE = "./_content/Microsoft.FluentUI.AspNetCore.Components/Components/List/FluentCombobox.razor.js";
 
@@ -37,6 +37,12 @@ public partial class FluentCombobox<TOption> : ListComponentBase<TOption> where
     [Parameter]
     public bool? Open { get; set; }
 
+    /// <summary>
+    /// Gets or sets the option to allow closing the FluentCombobox list by clicking the dropdown button. Default is false.
+    /// </summary>
+    [Parameter]
+    public bool? EnableClickToClose { get; set; } = false;
+
     /// <summary>
     /// Gets or sets the placement for the listbox when the combobox is open.
     /// See <seealso cref="AspNetCore.Components.SelectPosition"/>
@@ -64,6 +70,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             {
                 Module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
                 await Module.InvokeVoidAsync("setControlAttribute", Id, "autocomplete", "off");
+
+                if (EnableClickToClose ?? true)
+                {
+                    await Module.InvokeVoidAsync("attachIndicatorClickHandler", Id);
+                }
             }
         }
     }
@@ -162,4 +173,14 @@ protected override async Task ChangeHandlerAsync(ChangeEventArgs e)
             return null;
         }
     }
+
+    public new async ValueTask DisposeAsync()
+    {
+        if (Module is not null && !string.IsNullOrEmpty(Id))
+        {
+            await Module.InvokeVoidAsync("detachIndicatorClickHandler", Id);
+            await Module.DisposeAsync();
+        }
+        await base.DisposeAsync();
+    }
 }

src/Core/Components/List/FluentCombobox.razor.js

@@ -1,7 +1,54 @@
+const handlers = new Map();
+
 export function setControlAttribute(id, attrName, value) {
     const fieldElement = document.querySelector("#" + id)?.shadowRoot?.querySelector(".selected-value");
 
     if (!!fieldElement) {
         fieldElement?.setAttribute(attrName, value);
     }
 }
+
+export function attachIndicatorClickHandler(id) {
+    const combobox = document.querySelector("#" + id);
+    if (!combobox) return;
+
+    const indicator = combobox.shadowRoot?.querySelector('[part="indicator"]');
+
+    if (!indicator) return;
+
+    const clickHandler = (event) => {
+        if (combobox.hasAttribute('open')) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+
+            const escEvent = new KeyboardEvent('keydown', {
+                key: 'Escape',
+                code: 'Escape',
+                keyCode: 27,
+                bubbles: true,
+                cancelable: true
+            });
+
+            combobox.dispatchEvent(escEvent);
+        }
+    };
+
+    if (indicator) {
+        indicator.addEventListener('click', clickHandler);
+    }
+
+    handlers.set(id, { indicator, clickHandler });
+}
+
+export function detachHandlers(id) {
+    const handler = handlers.get(id);
+    if (handler) {
+        const { indicator, clickHandler } = handler;
+
+        if (indicator) {
+            indicator.removeEventListener('click', clickHandler);
+        }
+
+        handlers.delete(id);
+    }
+}