Error when Printing through JS when using .NET Maui Blazor Hybrid

[ChristopherRecinos]

Description

I am trying to print a specific html element using Blazor with MAUI. I am able to get the specific element to show up in the print preview using js document.getElementById and using window.print().

The error occurs AFTER closing the print preview window, whether you print or cancel does not matter.

This is the error.

However, if you do a ctrl-p and close that print preview, the error does NOT occur.

Steps to Reproduce

With my sample project, just hit the Test button in the index.razor page. A print preview dialog will open, hit cancel and you will see the error.

Link to public reproduction project repository

https://ChristopherRecinos@dev.azure.com/ChristopherRecinos/MauiBlazorPrintTest/_git/MauiBlazorTest

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows, I was not able test on other platforms

Affected platform versions

net7.0-windows10.0.19041.0

Did you find any workaround?

The only solution I have found so far is to call location.reload(), which refreshes the page, but this is not a proper solution for my project and I would expect its not for anyone else. It does allow you to at least continue using the app.

Relevant log output

Received unexpected acknowledgement for render batch 3 (next batch should be 2)
   at Microsoft.AspNetCore.Components.WebView.Services.WebViewRenderer.NotifyRenderCompleted(Int64 batchId)
   at Microsoft.AspNetCore.Components.WebView.IpcReceiver.OnRenderCompleted(PageContext pageContext, Int64 batchId, String errorMessageOrNull)
   at Microsoft.AspNetCore.Components.WebView.IpcReceiver.OnMessageReceivedAsync(PageContext pageContext, String message)
   at Microsoft.AspNetCore.Components.WebView.WebViewManager.<>c__DisplayClass18_0.<<MessageReceived>b__0>d.MoveNext()

[yeganehaym]

is there any workaround to solve the problem?

[ChristopherRecinos]

I currently have two workarounds which is to just reload the page using location.reload() in JS after the window.print(), or having the user just use ctrl-p key input.

[ChristopherRecinos]

@mkArtakMSFT I see that you added this to .Net 8 planning, does that mean that this issue is something that is being worked on?

[Eilon]

Hi folks, I started taking a look at this but it seems I can't access the repro project.

I tried adding this HTML to Home.razor:

<button onclick="window.print()">Print me</button>

And that seemed to work fine. I could print (to a PDF), or I could cancel the dialog. Everything worked as I expected.

I couldn't find any legitimate way to print only one HTML element. Some of the techniques I found online for doing that seemed like bad ideas, such as temporarily replacing the whole DOM with just the HTML to print, and then restoring at. That's a bad idea for many reasons, including that it would completely break all JS code (which includes Blazor).

If anyone can provide more info about exactly how to reproduce this issue, I can continue the investigation. Thanks!

[ghost]

Hi @ChristopherRecinos. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.