Error in net-maui Blazor Hybrid APP

[johannes-steurer]

Hi,

I appreciate you work. Great component!

I use the Signature pad (8.1.5) in a blazor server scenario as well as in a BlazorWebView via net Maui (both time via the exact same code via a shared razor-class-library). In the Browser I have zero issues, but in net Maui sometimes I get the following Exception:

On Android it looks like this:

Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener')
TypeError: Cannot read properties of null (reading 'addEventListener')
    at Module.setup (https://0.0.0.0/_content/Blazor.SignaturePad/sigpad.interop.js?ver=8.1.5:9:13)
    at https://0.0.0.0/_framework/blazor.webview.js:1:3050
    at new Promise (<anonymous>)
    at g.beginInvokeJSFromDotNet (https://0.0.0.0/_framework/blazor.webview.js:1:3007)
    at External.__callback (https://0.0.0.0/_framework/blazor.webview.js:1:48020)
    at MessagePort.<anonymous> (<anonymous>:23:21)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference , String , Object[] )
   at SignaturePad.SignaturePad.Setup()
   at SignaturePad.SignaturePad.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState ) | AddWebMobile.RazorPages.Index.BuildRenderTree

on iOS it slooks a bit different:

ERROR  Microsoft.JSInterop.JSException: null is not an object (evaluating 'element.addEventListener')
setup@app://0.0.0.0/_content/Blazor.SignaturePad/sigpad.interop.js:9:12
@app://0.0.0.0/_framework/blazor.webview.js:1:3050
Promise@[native code]
beginInvokeJSFromDotNet@app://0.0.0.0/_framework/blazor.webview.js:1:3018
@app://0.0.0.0/_framework/blazor.webview.js:1:48025
@user-script:1:4:75
forEach@[native code]
@user-script:1:4:45
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__16`1[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=8.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext()
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference , String , Object[] )
   at SignaturePad.SignaturePad.Setup()
   at SignaturePad.SignaturePad.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task , ComponentState ) | AddWebMobile.RazorPages.Index.BuildRenderTree

I am not able to tell under which circumstances this happens as I myself could not reproduce it so far, but got several error-reports from customers.

Thanks for your support

[MarvinKlein1508]

Hi!

Thanks for reaching out. Are you able to craft a small reproduction repo?

I'm not very familiar with MAUI since I avoid anything XAML related from Microsoft.

Are you able to reproduce the same behaviour in during Debug?

[johannes-steurer]

Unfortunately not as I still don't know why and under which circumstances this happens. Customers describe it to me as random which normally means that it as something to do with timing (e.g. something is evaluated before initialized).

I think it has nothing to do with maui in particular, just that Maui is the host system, but the BlazorWebView lets you use all the Maui goodness (mutiplatform etc.) just without xaml and you can use the same code for a native as as for the web-app.

I thought you might find a clue in the stacktrace why the "element" could be null when evaluating 'element.addEventListener'

Thank

[johannes-steurer]

Hi,

I have put some logs into my APP to find a possible cause. I see that it happens before any user-interaction.

What the APP does:
Navigate to a new Maui-Page which just shows a .razor file via BlazorWebView, where some edit-fields are placed along with your SignaturePad. All in a separate DxFormLayoutItem.
This is working fine only 99% of the time, but sometimes I get the Exception shared above

Maybe I initialize something wrong? This is what I do:

<style>
    .signature {
        border: 2px dotted #CCCCCC;
        border-radius: 15px;
        cursor: crosshair;
        display: block;
    }
</style>


<SignaturePad style="width: 100%" ClearButtonText="@Langres.SignatureClearButtonText" ValueChanged="ValueChanged" 
Class="signature" Options="_options" />
@code {
    private SignaturePadOptions _options = new SignaturePadOptions
    {
            BackgroundColor = "rgb(255, 255, 255)",
    };

    byte[] _signature { get; set; } = Array.Empty<byte>();
    [Parameter]
    public EventCallback<string> SignatureChanged { get; set; }
    Task ValueChanged(byte[] signature)
    {
        var base64Source = System.Text.Encoding.UTF8.GetString(signature); // has the format "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."
        var split = base64Source.Split(',');
        return SignatureChanged.InvokeAsync(split.Length != 2 ? "" : base64Source.Split(',')[1]);
    }
}

[MarvinKlein1508]

@johannes-steurer what happens when you use @bind-Value instead? Are you able to share this repository with me? I've never built a MAUI app in my life. I stricly stay away from anything that uses XAML.

[johannes-steurer]

Unfortunately I am not able to share the repo. It's acually quite big and complex and it would be really hard to find what you are looking for I guess.
What kind of information would you seek?

Why would you expect a difference in using @bind-value? Doesnt that just wire the ValueChanged event? And as I see the Value Parameter is initialized property. I would not see any difference also because the issue is before any user interaction.

Thanks for your support

[johannes-steurer]

Hi,

I may have found my Problem (not sure yet as I need customer feedback after a new release). It was caused because the Signature-Pad was shown for a very short time due to a bug. I gues this lead to some transient state which the SignaturePad did no like

I could trace it to this source:

export function setup(id, reference, options, image) {
    dotNetHelper = reference;
    var identifier = "signature-" + id;
    var element = document.getElementById(identifier); // <<<=== I think the Problem is here that the element was not found. Maybe you should return here and make a log if elemet is null

    element.addEventListener("sigpad.finish", function (e) {
        updateImage(id, e.detail)
        reference.invokeMethodAsync('SignatureDataChangedAsync');
    });

    var sigpad = Sigpad.getOrCreateInstance(element, JSON.parse(options));
    sigpad.setImage(image);
}

Does this make sense?

[Darioncorah]

Are you still looking into this? I'm running into the same error on regular Blazor. It happens when using a tab control that unloads content on non active tabs, swapping to a tab with a signature pad, then swapping back to a different tab before the signature pad has time to finish loading.

There are 2 different errors:

2025-04-03.09-00-02.mp4

2025-04-03.09-01-00.mp4

[MarvinKlein1508]

Hi @Darioncorah can you provide a minimal sample repository? I'm not familar with .NET MAUI at all but I'm happy taking a look into it if you provide a sample.

[Darioncorah]

@MarvinKlein1508 This happens on a regular Blazor webapp

[MarvinKlein1508]

Can you show the structure of your tabs?

[Darioncorah]

I'm using mudblazor tabs
https://mudblazor.com/components/tabs#api
I'll see if I can throw together a sample app real quick

[MarvinKlein1508]

@Darioncorah have you seen the MudsBlazor demo we provide? There is also a demonstration for tabs as well.

[Darioncorah]

A coworker set this up so I had not. I just looked at it and within the demo you have
<MudTabs KeepPanelsAlive="true">
which isn't really an option for us as we have several large dynamic forms that slow down the response time dramatically if we keep all tabs active.

[MarvinKlein1508]

It should work without this parameter as well. This was a workaround for earlier versions of MudBlazor. But feel free to craft a sample app and I will happily investigate it more.