Fix various issues in MudBlazor. by maliming · Pull Request #25393 · abpframework/abp

maliming · 2026-05-08T03:19:33Z

No description provided.

Saas tenant create modal (and other mud CRUD pages) duplicated rows when the user double-clicked Save: the second click hit AppService.CreateAsync before the first response had returned. Add IsCreating / IsUpdating gates to AbpMudCrudPageBase so concurrent calls return immediately. Wrap the body in try/finally and trigger StateHasChanged so any UI bindings to these flags reflect the busy state.

Top-level "Select All in All Tabs" already used `Indeterminate` to show a partial-grant state. The per-tab "Select All in This Tab" checkbox was a plain two-state binding to `Permissions.All(x => x.IsGranted)`, so a tab with some (but not all) permissions granted rendered as unchecked - reading as "no permissions granted" to QA. Bind `Indeterminate` to "any granted but not all granted" to match the top-level behavior.

…d to avoid empty card flicker

- Directory.Packages.props bumps MudBlazor 8.0.0 to 9.4.0 - AbpMudCrudPageBase: ShowMessageBox to ShowMessageBoxAsync, OnDataGridReadAsync adds CancellationToken - AbpMudExtensibleDataGrid: ServerData adds CancellationToken, SortFunc becomes Func<TItem, object?> - basic-theme LoginDisplay (Server + WASM): name MudMenu ActivatorContent context to avoid AuthorizeView clash - permission-management and feature-management modals: ShowMessageBox to ShowMessageBoxAsync

- MudMenu: switch ActivatorContent to MenuContext.ToggleAsync pattern (v9 breaking) - MudForm: rename Validate to ValidateAsync (v9.1 obsoletion) - MudInput: replace AutoGrow with Sizing for textarea - DataGrid: add white-space:nowrap on header to prevent CJK characters stacking vertically - BlockUI: shrink loading spinner inside mud-dialog - Search field: switch Label to Placeholder so the text shows next to the magnifier icon

Long label text (e.g. Turkish translations) on MudDatePicker / MudTimePicker overflowed the input and visually overlapped the calendar toggle icon on the right. Reserve 40px on the right for the end-adornment icon so the label clips with ellipsis.

The custom Style="max-height: 600px; overflow-y: auto;" on MudTabs produced an inner scrollbar in addition to mud-dialog's own scrollbar, resulting in a double scrolling experience inside the permissions modal. Let mud-dialog handle overflow natively.

MudBlazor 9 defaults .mud-input-label-inputcontrol to line-height: 1.15rem, which is smaller than a typical 16px character with descenders. Letters like g, p, q, y in the floated label visually clipped under the input baseline. Bump to 1.4rem so descenders have room without enlarging the overall control.

MudBlazor 9 renders mud-tabs-vertical with the tabbar flush against the panels container, making the active tab indicator visually touch the panel content. Add 16px padding-inline-start on the panels area (and -end for the reverse layout) so the tabbar and panels have breathing room.

…ixes

… options

…ixes

…with modal focus behavior and namespace usage

Copilot

Pull request overview

This PR upgrades MudBlazor to 9.4.0 and updates ABP’s MudBlazor UI packages, module pages, assets, and docs to align with the newer MudBlazor APIs and behavior.

Changes:

Migrates MudBlazor API usage such as async form/dialog methods, new checkbox tri-state usage, menu activators, data-grid server callbacks, and textarea sizing.
Adjusts dialog focus behavior, module imports, CSS overrides, and adds a MudBlazor popover JS patch across hosting bundles.
Updates MudBlazor-specific documentation for PageHeader namespace and modal focus guidance.

Reviewed changes

Copilot reviewed 37 out of 37 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
`Directory.Packages.props`	Upgrades MudBlazor package version to 9.4.0.
`framework/src/Volo.Abp.MudBlazorUI/MudBlazorUiPageProgressService.cs`	Reworks MudBlazor page progress handling with ref-counting and hide debounce.
`framework/src/Volo.Abp.MudBlazorUI/AbpMudCrudPageBase.cs`	Updates CRUD validation/dialog APIs and adds create/update guards.
`framework/src/Volo.Abp.MudBlazorUI/Components/AbpMudExtensibleDataGrid.razor.cs`	Updates data-grid server callback and nullable sort delegates.
`framework/src/Volo.Abp.MudBlazorUI/Components/ObjectExtending/MudTextAreaExtensionProperty.razor`	Replaces removed textarea autogrow API.
`framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css`	Adds MudBlazor v9 visual/layout overrides.
`framework/src/Volo.Abp.MudBlazorUI/wwwroot/abp-mud-popover-patch.js`	Adds a popover observer guard patch.
`framework/src/Volo.Abp.AspNetCore.Components.WebAssembly.Theming.MudBlazor.Bundling/BlazorWebAssemblyMudBlazorScriptContributor.cs`	Registers the MudBlazor popover patch for WASM.
`framework/src/Volo.Abp.AspNetCore.Components.Server.Theming.MudBlazor/Bundling/BlazorServerMudBlazorScriptContributor.cs`	Registers the MudBlazor popover patch for Server.
`framework/src/Volo.Abp.AspNetCore.Components.MauiBlazor.Theming.MudBlazor.Bundling/MauiBlazorMudBlazorScriptContributor.cs`	Registers the MudBlazor popover patch for MAUI Blazor.
`modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor.MudBlazor/Pages/TenantManagement/TenantManagement.razor`	Sets dialog default focus.
`modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor.MudBlazor/Pages/TenantManagement/TenantManagement.razor.cs`	Migrates form validation to async API.
`modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor.MudBlazor/_Imports.razor`	Adds MudBlazor layout namespace import.
`modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/SettingManagement.razor`	Adds loading state and minimum card height.
`modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/EmailSettingGroup/EmailSettingGroupViewComponent.razor`	Sets test-email dialog default focus.
`modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/Pages/SettingManagement/EmailSettingGroup/EmailSettingGroupViewComponent.razor.cs`	Migrates form validation to async API.
`modules/setting-management/src/Volo.Abp.SettingManagement.Blazor.MudBlazor/_Imports.razor`	Adds MudBlazor layout namespace import.
`modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/Components/PermissionManagementModal.razor`	Updates search field, dialog focus, tabs, and tri-state select-all checkboxes.
`modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/Components/PermissionManagementModal.razor.cs`	Migrates message box API to async.
`modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/Components/ResourcePermissionManagementModal.razor`	Sets dialog default focus.
`modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/Components/ResourcePermissionManagementModal.razor.cs`	Migrates validation and message box APIs to async.
`modules/permission-management/src/Volo.Abp.PermissionManagement.Blazor.MudBlazor/_Imports.razor`	Adds MudBlazor layout namespace import.
`modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/Pages/Identity/UserManagement.razor`	Updates search placeholder and dialog/tab focus behavior.
`modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/Pages/Identity/RoleManagement.razor`	Sets dialog default focus.
`modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/_Imports.razor`	Adds MudBlazor layout namespace import.
`modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/Components/FeatureManagementModal.razor`	Updates dialog focus and keeps tab panels alive.
`modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/Components/FeatureManagementModal.razor.cs`	Migrates message box API to async.
`modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor.MudBlazor/_Imports.razor`	Adds MudBlazor layout namespace import.
`modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.MudBlazorBasicTheme/Themes/Basic/LoginDisplay.razor`	Updates MudMenu activator usage for WASM login display.
`modules/basic-theme/src/Volo.Abp.AspNetCore.Components.WebAssembly.MudBlazorBasicTheme/Themes/Basic/LanguageSwitch.razor`	Updates MudMenu activator usage for WASM language switch.
`modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme/Themes/Basic/LoginDisplay.razor`	Updates MudMenu activator usage for Server login display.
`modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Server.MudBlazorBasicTheme/Themes/Basic/LanguageSwitch.razor`	Updates MudMenu activator usage for Server language switch.
`modules/account/src/Volo.Abp.Account.Blazor.MudBlazor/Pages/Account/AccountManage.razor.cs`	Migrates account forms to async validation.
`modules/account/src/Volo.Abp.Account.Blazor.MudBlazor/_Imports.razor`	Adds MudBlazor layout namespace import.
`docs/en/framework/ui/blazor/page-header.md`	Documents MudBlazor-specific `PageHeader` namespace.
`docs/en/framework/ui/blazor/forms-validation.md`	Adds MudBlazor modal focus guidance.

+        if (percentage == -1 && Interlocked.Decrement(ref _activeCount) <= 0)
+        {
+            Interlocked.Exchange(ref _activeCount, 0);
+            _hideTimer.Change(HideDelayMs, Timeout.Infinite);
+        }
+        else if (percentage == null && Interlocked.Increment(ref _activeCount) == 1)
+        {
+            _hideTimer.Change(Timeout.Infinite, Timeout.Infinite);
+            ProgressChanged?.Invoke(this, new UiPageProgressEventArgs(null, opt));
+        }


+        var opt = new UiPageProgressOptions();
+        options?.Invoke(opt);


Follow-up review fixes for MudBlazor PR #25393

maliming added this to the 10.4-final milestone May 8, 2026

maliming added 8 commits May 8, 2026 13:34

Wrap mud OnDeletedEntityAsync with InvokeAsync and null-check _dataGrid

d50e41a

Show loading spinner on mud Setting Management while contributors loa…

51c7580

…d to avoid empty card flicker

maliming modified the milestones: 10.4-final, 10.5-preview May 12, 2026

maliming added 6 commits May 12, 2026 16:11

Merge remote-tracking branch 'origin/rel-10.4' into maliming/mud-qa-f…

3f2e282

…ixes

Enhance MudBlazor UI components with improved dialog focus and layout…

2a5fe38

… options

Merge remote-tracking branch 'origin/rel-10.4' into maliming/mud-qa-f…

ac8d1d8

…ixes

docs(blazor): enhance forms-validation and page-header documentation …

609fc56

…with modal focus behavior and namespace usage

feat: add abp-mud-popover-patch.js and include it in script contributors

a5aa6bc

maliming marked this pull request as ready for review May 26, 2026 09:46

Copilot AI review requested due to automatic review settings May 26, 2026 09:46

maliming added the dependency-change Indicates a version change of a dependency (typically, upgrade) label May 26, 2026

Copilot started reviewing on behalf of maliming May 26, 2026 09:46 View session

docs: update package version changes [skip ci]

af34908

maliming requested a review from ismcagdas May 26, 2026 09:48

Copilot AI reviewed May 26, 2026

View reviewed changes

ismcagdas merged commit 868c729 into rel-10.4 May 26, 2026
1 check passed

ismcagdas deleted the maliming/mud-qa-fixes branch May 26, 2026 10:04

maliming mentioned this pull request May 27, 2026

Follow-up review fixes for MudBlazor PR #25393 #25483

Merged

ismcagdas added a commit that referenced this pull request May 28, 2026

Merge pull request #25483 from abpframework/maliming/mud-qa-followup

c569981

Follow-up review fixes for MudBlazor PR #25393

pull Bot pushed a commit to weiyilai/abp that referenced this pull request May 28, 2026

Follow-up review fixes for MudBlazor PR abpframework#25393

c13a909

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix various issues in MudBlazor.#25393

Fix various issues in MudBlazor.#25393
ismcagdas merged 16 commits into
rel-10.4from
maliming/mud-qa-fixes

maliming commented May 8, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

maliming commented May 8, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants