Merge pull request #25393 from abpframework/maliming/mud-qa-fixes

Fix various issues in MudBlazor.

Author: ismcagdas

Directory.Packages.props

@@ -23,7 +23,7 @@
     <PackageVersion Include="Blazorise.Components" Version="2.0.4" />
     <PackageVersion Include="Blazorise.DataGrid" Version="2.0.4" />
     <PackageVersion Include="Blazorise.Snackbar" Version="2.0.4" />
-    <PackageVersion Include="MudBlazor" Version="8.0.0" />
+    <PackageVersion Include="MudBlazor" Version="9.4.0" />
     <PackageVersion Include="Castle.Core" Version="5.2.1" />
     <PackageVersion Include="Castle.Core.AsyncInterceptor" Version="2.1.0" />
     <PackageVersion Include="CommonMark.NET" Version="0.15.1" />

docs/en/framework/ui/blazor/forms-validation.md

@@ -138,4 +138,33 @@ protected override Task OnCreatingEntityAsync()
 
 > Check the [MudBlazor documentation](https://mudblazor.com/components/form) for the full list of validation modes and the [MudBlazor inputs reference](https://mudblazor.com/components/textfield).
 
+### Modal Focus Behavior
+
+By default a `MudFocusTrap` inside `<MudDialog>` focuses the first tabbable child element after the dialog opens. When the dialog contains a `<MudTabs>` as the first child, that "first tabbable element" is the tab button — not the first input on the active tab — so the user has to click into the field manually.
+
+For dialogs that contain a `<MudTabs>`, use this three-part setup to focus the intended input automatically:
+
+```razor
+<MudDialog DefaultFocus="DefaultFocus.None" @ref="_createDialog" Options="@CreateDialogOptions">
+    <DialogContent>
+        <MudForm @ref="@CreateFormRef" Model="@NewEntity">
+            <MudTabs @bind-ActivePanelIndex="@_createTabIndex" KeepPanelsAlive="true">
+                <MudTabPanel Text="@L["UserInformations"]">
+                    <MudTextField @bind-Value="@NewEntity.UserName"
+                                  Label="@L["UserName"]"
+                                  AutoFocus="true"
+                                  Required="true" />
+                    ...
+                </MudTabPanel>
+                ...
+```
+
+- `DefaultFocus="DefaultFocus.None"` on the `<MudDialog>` disables the focus trap's automatic focus so it doesn't grab the tab button.
+- `KeepPanelsAlive="true"` on the `<MudTabs>` mounts every tab panel up front, so the first input's `firstRender` happens at dialog-open time (otherwise inactive panels are mounted later, and `AutoFocus` runs after the dialog is already visible).
+- `AutoFocus="true"` on the first input asks MudBlazor to focus that field on its first render.
+
+`DialogOptions.DefaultFocus` is ignored for inline dialogs (`<MudDialog @ref> + ShowAsync()`), so always set `DefaultFocus` directly on the `<MudDialog>` element.
+
+For a dialog without `<MudTabs>` (first child is the input), `DefaultFocus="DefaultFocus.FirstChild"` (the MudBlazor default) is enough and you don't need `AutoFocus`.
+
 {{end}}

docs/en/framework/ui/blazor/page-header.md

@@ -14,7 +14,23 @@
 
 # Blazor UI: Page Header
 
-You can use the`PageHeader` component to set the page title, the breadcrumb items and the toolbar items for a page. Before using the `PageHeader` component, you need to add a using statement for the `Volo.Abp.AspNetCore.Components.Web.Theming.Layout` namespace.
+You can use the `PageHeader` component to set the page title, the breadcrumb items and the toolbar items for a page. Before using the `PageHeader` component, you need to add a using statement for the namespace:
+
+{{if BlazorUI == "Blazorise"}}
+
+```razor
+@using Volo.Abp.AspNetCore.Components.Web.Theming.Layout
+```
+
+{{end}}
+
+{{if BlazorUI == "MudBlazor"}}
+
+```razor
+@using Volo.Abp.AspNetCore.Components.Web.Theming.MudBlazor.Layout
+```
+
+{{end}}
 
 Once you add the `PageHeader` component to your page, you can control the related values using the parameters. 
 

docs/en/package-version-changes.md

@@ -7,6 +7,12 @@
 
 # Package Version Changes
 
+## 10.4.1
+
+| Package | Old Version | New Version | PR |
+|---------|-------------|-------------|-----|
+| MudBlazor | 8.0.0 | 9.4.0 | #25393 |
+
 ## 10.4.0-rc.2
 
 | Package | Old Version | New Version | PR |

framework/src/Volo.Abp.AspNetCore.Components.MauiBlazor.Theming.MudBlazor.Bundling/MauiBlazorMudBlazorScriptContributor.cs

@@ -8,6 +8,7 @@ public class MauiBlazorMudBlazorScriptContributor : BundleContributor
     public override void ConfigureBundle(BundleConfigurationContext context)
     {
         context.Files.AddIfNotContains("_content/MudBlazor/MudBlazor.min.js");
+        context.Files.AddIfNotContains("_content/Volo.Abp.MudBlazorUI/abp-mud-popover-patch.js");
         context.Files.AddIfNotContains("_content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/abp.js");
         context.Files.AddIfNotContains("_content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/lang-utils.js");
     }

framework/src/Volo.Abp.AspNetCore.Components.Server.Theming.MudBlazor/Bundling/BlazorServerMudBlazorScriptContributor.cs

@@ -16,6 +16,7 @@ public override void ConfigureBundle(BundleConfigurationContext context)
             context.Files.AddIfNotContains("/_framework/blazor.server.js");
         }
         context.Files.AddIfNotContains("/_content/MudBlazor/MudBlazor.min.js");
+        context.Files.AddIfNotContains("/_content/Volo.Abp.MudBlazorUI/abp-mud-popover-patch.js");
         context.Files.AddIfNotContains("/_content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/abp.js");
         context.Files.AddIfNotContains("/_content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/authentication-state-listener.js");
     }

framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.Theming.MudBlazor.Bundling/BlazorWebAssemblyMudBlazorScriptContributor.cs

@@ -9,6 +9,7 @@ public override void ConfigureBundle(BundleConfigurationContext context)
     {
         context.Files.AddIfNotContains("_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js");
         context.Files.AddIfNotContains("_content/MudBlazor/MudBlazor.min.js");
+        context.Files.AddIfNotContains("_content/Volo.Abp.MudBlazorUI/abp-mud-popover-patch.js");
         context.Files.AddIfNotContains("_content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/abp.js");
         context.Files.AddIfNotContains("_content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/lang-utils.js");
         context.Files.AddIfNotContains("_content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/authentication-state-listener.js");

framework/src/Volo.Abp.MudBlazorUI/AbpMudCrudPageBase.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
+using System.Threading;
 using System.Threading.Tasks;
 using Localization.Resources.AbpUi;
 using Microsoft.AspNetCore.Authorization;
@@ -203,6 +204,9 @@ public abstract class AbpMudCrudPageBase<
     protected MudDialog? _createDialog;
     protected MudDialog? _editDialog;
 
+    protected bool IsCreating { get; set; }
+    protected bool IsUpdating { get; set; }
+
     protected virtual DialogOptions CreateDialogOptions => new DialogOptions
     {
         MaxWidth = MaxWidth.Medium,
@@ -329,7 +333,7 @@ protected virtual async Task SearchEntitiesAsync()
         }
     }
 
-    protected virtual async Task<GridData<TListViewModel>> OnDataGridReadAsync(GridState<TListViewModel> state)
+    protected virtual async Task<GridData<TListViewModel>> OnDataGridReadAsync(GridState<TListViewModel> state, CancellationToken cancellationToken = default)
     {
         CurrentSorting = state.SortDefinitions
             .Select(s => _dataGrid.ResolveSortPropertyName(s) + (s.Descending ? " DESC" : ""))
@@ -452,12 +456,20 @@ protected virtual Task CloseEditDialogAsync()
 
     protected virtual async Task CreateEntityAsync()
     {
+        if (IsCreating)
+        {
+            return;
+        }
+
         try
         {
+            IsCreating = true;
+            await InvokeAsync(StateHasChanged);
+
             var isValid = true;
             if (CreateFormRef != null)
             {
-                await CreateFormRef.Validate();
+                await CreateFormRef.ValidateAsync();
                 isValid = CreateFormRef.IsValid;
             }
 
@@ -476,6 +488,11 @@ protected virtual async Task CreateEntityAsync()
         {
             await HandleErrorAsync(ex);
         }
+        finally
+        {
+            IsCreating = false;
+            await InvokeAsync(StateHasChanged);
+        }
     }
 
     protected virtual Task OnCreatingEntityAsync()
@@ -497,12 +514,20 @@ protected virtual string GetCreateMessage()
 
     protected virtual async Task UpdateEntityAsync()
     {
+        if (IsUpdating)
+        {
+            return;
+        }
+
         try
         {
+            IsUpdating = true;
+            await InvokeAsync(StateHasChanged);
+
             var isValid = true;
             if (EditFormRef != null)
             {
-                await EditFormRef.Validate();
+                await EditFormRef.ValidateAsync();
                 isValid = EditFormRef.IsValid;
             }
 
@@ -521,6 +546,11 @@ protected virtual async Task UpdateEntityAsync()
         {
             await HandleErrorAsync(ex);
         }
+        finally
+        {
+            IsUpdating = false;
+            await InvokeAsync(StateHasChanged);
+        }
     }
 
     protected virtual Task OnUpdatingEntityAsync()
@@ -569,7 +599,10 @@ protected virtual Task OnDeletingEntityAsync()
 
     protected virtual async Task OnDeletedEntityAsync()
     {
-        await _dataGrid.ReloadServerDataAsync();
+        if (_dataGrid != null)
+        {
+            await InvokeAsync(() => _dataGrid.ReloadServerDataAsync());
+        }
         Snackbar.Add(GetDeleteMessage(), Severity.Success);
     }
 
@@ -585,7 +618,7 @@ protected virtual string GetDeleteConfirmationMessage(TListViewModel entity)
 
     protected virtual async Task<bool> ConfirmDeleteAsync(TListViewModel entity)
     {
-        var result = await DialogService.ShowMessageBox(
+        var result = await DialogService.ShowMessageBoxAsync(
             UiLocalizer["AreYouSure"],
             GetDeleteConfirmationMessage(entity),
             yesText: UiLocalizer["Yes"],

framework/src/Volo.Abp.MudBlazorUI/Components/AbpMudExtensibleDataGrid.razor.cs

@@ -4,6 +4,7 @@
 using System.Linq;
 using System.Reflection;
 using System.Text.RegularExpressions;
+using System.Threading;
 using System.Threading.Tasks;
 using Localization.Resources.AbpUi;
 using Microsoft.AspNetCore.Components;
@@ -28,9 +29,9 @@ public partial class AbpMudExtensibleDataGrid<TItem> : ComponentBase
     /// Maps SortBy func references to their corresponding property names.
     /// Used to resolve property names from MudBlazor SortDefinition.SortFunc.
     /// </summary>
-    private readonly Dictionary<Func<TItem, object>, string> _sortFuncToPropertyMap = new();
+    private readonly Dictionary<Func<TItem, object?>, string> _sortFuncToPropertyMap = new();
 
-    [Parameter] public Func<GridState<TItem>, Task<GridData<TItem>>>? ServerData { get; set; }
+    [Parameter] public Func<GridState<TItem>, CancellationToken, Task<GridData<TItem>>>? ServerData { get; set; }
 
     [Parameter] public bool Loading { get; set; }
 
@@ -192,7 +193,7 @@ protected virtual string GetColumnStyle(TableColumn column)
         return string.Empty;
     }
 
-    protected virtual Func<TItem, object>? GetSortByFunc(TableColumn column)
+    protected virtual Func<TItem, object?>? GetSortByFunc(TableColumn column)
     {
         if (!column.Sortable)
         {
@@ -221,7 +222,7 @@ protected virtual string GetColumnStyle(TableColumn column)
         var parameter = System.Linq.Expressions.Expression.Parameter(typeof(TItem), "x");
         System.Linq.Expressions.Expression expression = parameter;
 
-        Func<TItem, object>? sortFunc = null;
+        Func<TItem, object?>? sortFunc = null;
         foreach (var prop in properties)
         {
             var propertyInfo = expression.Type.GetProperty(prop, BindingFlags.Public | BindingFlags.Instance);
@@ -237,7 +238,7 @@ protected virtual string GetColumnStyle(TableColumn column)
         if (sortFunc == null)
         {
             var convertExpression = System.Linq.Expressions.Expression.Convert(expression, typeof(object));
-            var lambda = System.Linq.Expressions.Expression.Lambda<Func<TItem, object>>(convertExpression, parameter);
+            var lambda = System.Linq.Expressions.Expression.Lambda<Func<TItem, object?>>(convertExpression, parameter);
             sortFunc = lambda.Compile();
         }
 
@@ -247,7 +248,7 @@ protected virtual string GetColumnStyle(TableColumn column)
         return sortFunc;
     }
 
-    protected virtual Func<TItem, object>? GetExtensionPropertySortFunc(TableColumn column)
+    protected virtual Func<TItem, object?>? GetExtensionPropertySortFunc(TableColumn column)
     {
         if (!column.Sortable || string.IsNullOrWhiteSpace(column.Data))
         {
@@ -261,7 +262,7 @@ protected virtual string GetColumnStyle(TableColumn column)
         }
 
         var propertyName = match.Groups[1].Value;
-        Func<TItem, object> sortFunc = item =>
+        Func<TItem, object?> sortFunc = item =>
         {
             var entity = item as IHasExtraProperties;
             return entity?.GetProperty(propertyName) ?? string.Empty;

framework/src/Volo.Abp.MudBlazorUI/Components/ObjectExtending/MudTextAreaExtensionProperty.razor

@@ -9,7 +9,7 @@
                   Label="@PropertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"
                   @bind-Value="@Value"
                   Lines="3"
-                  AutoGrow="true"
+                  Sizing="InputSizing.Auto"
                   Disabled="IsReadonlyField"
                   Validation="@((Func<string?, string?>)Validate)"
                   Immediate="true" />