MudFocusTrap: Prevent JSException on Disposed Component

[jHabjanMXP]

Issue

[Error] (Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost) Unhandled exception in circuit 'Wvm...'.
Microsoft.JSInterop.JSException: Unable to focus an invalid element.
Error: Unable to focus an invalid element.
    at Object.focus (https://localhost:7039/_framework/blazor.server.js:1:32169)
    at https://localhost:7039/_framework/blazor.server.js:1:2890
    at new Promise (<anonymous>)
    at w.beginInvokeJSFromDotNet (https://localhost:7039/_framework/blazor.server.js:1:2847)
    at Jt._invokeClientMethod (https://localhost:7039/_framework/blazor.server.js:1:63689)
    at Jt._processIncomingData (https://localhost:7039/_framework/blazor.server.js:1:61078)
    at Jt.connection.onreceive (https://localhost:7039/_framework/blazor.server.js:1:54719)
    at i.onmessage (https://localhost:7039/_framework/blazor.server.js:1:78667)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at MudBlazor.MudFocusTrap.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
2025-07-02 18:25:40.025 +02:00 [Warning] (Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer) Unhandled exception rendering component: Unable to focus an invalid element.

Received above issue when opening and closing dialog fast multiple times.

Changes

• using disposed check, not to start JsInterop processes in SaveFocusAsync and InitializeFocusAsync AFTER the component has already been disposed of

Type of Changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation (fix or improvement to the website or code docs)

Checklist

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[danielchalmers]

Is it possible to catch a more specific exception than Exception?

[versile2]

I would prefer to see if (_disposed) return; statements than a bunch of try/catch exceptions. Did you try that?

[jHabjanMXP]

will try thanks

[versile2]

Any update on this?

[jHabjanMXP]

@versile2 I adjusted the solution

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.31%. Comparing base (ad0a8c8) to head (1108eb4).
Report is 15 commits behind head on dev.

Additional details and impacted files

@@           Coverage Diff           @@
##              dev   #11586   +/-   ##
=======================================
  Coverage   91.31%   91.31%           
=======================================
  Files         466      466           
  Lines       14707    14708    +1     
  Branches     2857     2857           
=======================================
+ Hits        13430    13431    +1     
  Misses        635      635           
  Partials      642      642           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[versile2]

@versile2 I adjusted the solution

Did this _isDisposed solve the problem like your other solution?

[Copilot]

Pull Request Overview

This PR adds a disposal guard to MudFocusTrap to prevent JS interop calls after the component has been disposed, avoiding JS exceptions when rapidly opening and closing dialogs.

• Introduces a _disposed flag in the component.
• Adds an early-exit check in OnAfterRenderAsync to skip focus/save operations if disposed.
• Sets _disposed to true in Dispose before calling RestoreFocusAsync.

Comments suppressed due to low confidence (2)

src/MudBlazor/Components/FocusTrap/MudFocusTrap.razor.cs:21

• [nitpick] Consider renaming the field _disposed to _isDisposed or _hasBeenDisposed to more explicitly convey its boolean semantics and align with common naming conventions.

        private bool _disposed;

src/MudBlazor/Components/FocusTrap/MudFocusTrap.razor.cs:80

• Add unit or integration tests to simulate quick open/close scenarios, ensuring that no JS Interop calls are made after the component has been disposed to verify this new guard logic.

            if (_disposed) return;

[jHabjanMXP]

Yes, it prevents the component from crashing by preventing code being executed after the component is destroyed

[versile2]

@danielchalmers @ScarletKuro This is ready to merge, super simple now.

[danielchalmers]

Thank you!