Merge branch 'dev' into users/vnbaaij/fix-issue-#3185

microsoft · Jan 16, 2025 · 4fbe377 · 4fbe377
2 parents 91a63d8 + 0d82ff8
commit 4fbe377
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 2 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/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.

diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs
@@ -76,7 +76,7 @@ public partial class FluentDataGridCell<TGridItem> : FluentComponentBase
         .AddStyle("padding-top", "calc(var(--design-unit) * 1.5px)", Column is SelectColumn<TGridItem> && Grid.RowSize == DataGridRowSize.Small && Owner.RowType == DataGridRowType.Default)
         .AddStyle("width", Column?.Width, !string.IsNullOrEmpty(Column?.Width) && Grid.DisplayMode == DataGridDisplayMode.Table)
         .AddStyle("height", $"{Grid.ItemSize:0}px", () => !Grid.EffectiveLoadingValue && Grid.Virtualize && Owner.RowType == DataGridRowType.Default)
-        .AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && Grid.Items is not null && !Grid.MultiLine)
+        .AddStyle("height", $"{(int)Grid.RowSize}px", () => !Grid.EffectiveLoadingValue && !Grid.Virtualize && !Grid.MultiLine && (Grid.Items is not null || Grid.ItemsProvider is not null))
         .AddStyle("height", "100%", Grid.MultiLine)
         .AddStyle("min-height", "44px", Owner.RowType != DataGridRowType.Default)
         .AddStyle("display", "flex", CellType == DataGridCellType.ColumnHeader && !Grid.HeaderCellAsButtonWithMenu && !Grid.ResizableColumns && (Column is null || (Column!.Sortable.HasValue && !Column!.Sortable.Value)))

diff --git a/src/Core/Components/List/FluentCombobox.razor.cs b/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();
+    }
 }
diff --git a/src/Core/Components/List/FluentCombobox.razor.js b/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);
+    }
+}