From 94305a5967271c68e64c42a47c481fd8f3650dfb Mon Sep 17 00:00:00 2001 From: Roland <63738138+hml-coder@users.noreply.github.com> Date: Thu, 16 Jan 2025 05:06:20 -0400 Subject: [PATCH 1/2] [FluentCombobox] Add EnableClickToClose (#3186) * Add EnableClickToClose option to FluentCombobox for dropdown toggle control * [FluentCombobox] Add EnableClickToClose for dropdown list --- ...crosoft.FluentUI.AspNetCore.Components.xml | 5 ++ .../Components/List/FluentCombobox.razor.cs | 23 ++++++++- .../Components/List/FluentCombobox.razor.js | 47 +++++++++++++++++++ 3 files changed, 74 insertions(+), 1 deletion(-) diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 7986eef1a4..f9c6c70614 100644 --- 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. + + + Gets or sets the option to allow closing the FluentCombobox list by clicking the dropdown button. Default is false. + + Gets or sets the placement for the listbox when the combobox is open. diff --git a/src/Core/Components/List/FluentCombobox.razor.cs b/src/Core/Components/List/FluentCombobox.razor.cs index 8ebac06fdf..e5460022c7 100644 --- 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 : ListComponentBase where TOption : notnull +public partial class FluentCombobox : ListComponentBase, 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 : ListComponentBase where [Parameter] public bool? Open { get; set; } + /// + /// Gets or sets the option to allow closing the FluentCombobox list by clicking the dropdown button. Default is false. + /// + [Parameter] + public bool? EnableClickToClose { get; set; } = false; + /// /// Gets or sets the placement for the listbox when the combobox is open. /// See @@ -64,6 +70,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { Module ??= await JSRuntime.InvokeAsync("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 index 61f33d869f..a4c27c002d 100644 --- a/src/Core/Components/List/FluentCombobox.razor.js +++ b/src/Core/Components/List/FluentCombobox.razor.js @@ -1,3 +1,5 @@ +const handlers = new Map(); + export function setControlAttribute(id, attrName, value) { const fieldElement = document.querySelector("#" + id)?.shadowRoot?.querySelector(".selected-value"); @@ -5,3 +7,48 @@ export function setControlAttribute(id, attrName, value) { 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); + } +} From 0d82ff86e7a6eb41baedbbfaac885d33abed8bea Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Thu, 16 Jan 2025 15:52:08 +0100 Subject: [PATCH 2/2] Fix #3181 RowSize was not applied when using ItemsProvider without Virtualize (#3182) --- src/Core/Components/DataGrid/FluentDataGridCell.razor.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs index 17fa21ac6e..4c88cbc840 100644 --- a/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs +++ b/src/Core/Components/DataGrid/FluentDataGridCell.razor.cs @@ -76,7 +76,7 @@ public partial class FluentDataGridCell : FluentComponentBase .AddStyle("padding-top", "calc(var(--design-unit) * 1.5px)", Column is SelectColumn && 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)))