datagrid_page F5 to refresh error:JS object instance with ID 2 does not exist (has it been disposed?)

[19caiji]

platform:net8.0
library:Blazor Hybrid
nuget:Microsoft.AspNetCore.Components.WebView 8.0
error info:

[vnbaaij]

Sorry, but this contains absolutely nothing that we can reproduce or respond to. Closing this

[michelmoorlag]

@vnbaaij I have the same issue and have a sample solution to reproduce this. I have more details:

🐛 Bug Report

I have a page with a FluentDataGrid and a reload button. This runs fine on web but when I hit the reload button while running on Android in a Maui hybrid app I get this error: Error: JS object instance with ID 3 does not exist (has it been disposed?).

💻 Repro or Code Sample

Sample.zip

🤔 Expected Behavior

I would expect I can reload the page running on Android without errors, just like in web

😯 Current Behavior

When I run the sample application in Maui on a android simulator and hit the reload button I get this error:

chromium] [INFO:CONSOLE(1)] "JS object instance with ID 3 does not exist (has it been disposed?).
[chromium] Error: JS object instance with ID 3 does not exist (has it been disposed?).
[chromium] at w (https://0.0.0.0/_framework/blazor.webview.js:1:5273)
[chromium] at https://0.0.0.0/_framework/blazor.webview.js:1:3044
[chromium] at new Promise ()
[chromium] at g.beginInvokeJSFromDotNet (https://0.0.0.0/_framework/blazor.webview.js:1:3007)
[chromium] at External.__callback (https://0.0.0.0/_framework/blazor.webview.js:1:48020)
[chromium] at MessagePort. (:23:21)
[chromium] at Microsoft.JSInterop.JSRuntime.d__161[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext() [chromium] at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args) [chromium] at Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid1.d__123[[ParentCom.Shared.Components.Pages.Home.Person, ParentCom.Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
[chromium] at Microsoft.AspNetCore.Components.RenderTree.Renderer.<>c__DisplayClass85_0.<g__HandleAsyncExceptions|1>d.MoveNext()", source: https://0.0.0.0/_framework/blazor.webview.js (1)

💁 Possible Solution

Do not use the FluentDataGrid

🔦 Context

The user can change the language (localization) and therefore the page needs to be reloaded. I would like the possiblity to change language on every page, also the ones with the a FluentDataGrid.
Not sure if this is a Fluentui problem though. QuickGrid seem to have the same issue:
dotnet/maui#31942
Is the FluentGrid based on QuickGrid?

🌍 Your Environment

OS: Windows 11
VS: Version 17.9.5
Browser: Chrome Versie 123.0.6312.105 (Officiële build) (64-bits)
.Net 8.0.202
Microsoft.FluentUI.AspNetCore.Components 4.6.0
Android Pixel 5 api 33 emulator, but i have noticed it on other Android devices/api's too.

[vnbaaij]

Yes, FluentDataGrid is a QuickGrid in disguise. I'm reopening the issue (as blocked) so we can keep an eye on this MAUI issue you linked to.

[chungou1996]

Unfortunately, I also have a similar multi-language solution, but I found that any component with a KeyCode (such as NavMenu) will trigger a similar error in Blazor WPF during reload.

[chungou1996]

14-36-40.mp4

[vnbaaij]

@chungou1996 as mentioned, it is an (open) issue on the MAUI side. Nothing we can do here until that is fixed,

[chungou1996]

thanks, here's the temporary solution: before reload, notify the layout to hide all component (using conditional rendering) and handle it in OnAfterRenderAsync:

if (_reloading)
{
    var culture = await CultureJSInterop.GetCultureAsync() ?? CultureInfo.CurrentCulture; 
    // something else
   NavigationManager.Refresh(forceReload: true);
}

[vnbaaij]

this will be solved once a fix is deployed on the MAUI side. Closing this here as we can't do anything on our side,

[martinbu]

The same happens with WebView2 on WPF. The workaround suggested by @chungou1996 also works for WPF. We have handled a reload by listening for the ‘NavigationStarting’ event of WebView2 and making sure that all elements are hidden before the actual reload takes place.

        // MainWindow.xaml.cs
        private void WebView2_NavigationStarting(object? sender, CoreWebView2NavigationStartingEventArgs e)
        {
            _ReloadService.SetReloading(true);
        }

        @* App.razor *@
        @if (!_IsReloading)
        {
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        }