Clear Signature Programmatically

[mouse0270]

I am using MudBlazor Dialog to show the SignaturePad and this appears to work as expected. The Dialog is showing up and I can use the Signature pad. The problem becomes when I want to clear it. I set ShowClearButton to false and then added a dialog button for clear, so the UI will flow as expected. However, when the user hits the clear button, the SignaturePad keeps the data.

@using MudBlazor
@using SignaturePad

<MudDialog>
    <DialogContent>
        <SignaturePad @bind-Value="bSignature" ShowClearButton="false" style="max-width: calc(100vw - 3rem); width: 800px" />
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Clear">Clear</MudButton>
        <MudSpacer />
        <MudButton OnClick="Cancel">Cancel</MudButton>
        <MudButton Color="Color.Error" OnClick="Submit">Sign Document</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    public byte[] bSignature { get; set; } = Array.Empty<byte>();
    public string SignatureAsBase64 => System.Text.Encoding.UTF8.GetString(bSignature);

    protected override void OnInitialized() {

    }

    void Submit() => MudDialog.Close(DialogResult.Ok(true));
    void Cancel() => MudDialog.Cancel();
    private async Task Clear() {
        bSignature = Array.Empty<byte>();
        Console.WriteLine($"Signature cleared {bSignature.Length}");

        StateHasChanged();
    }
}

I can see that the console outputs a length of 0 after setting the array to Array.Empty<byte>() but the SignaturePad does not appear to update to show this.

12 is where I got the idea to clear set the Byte to an empty array to clear the signature pad, also I am using version 8.0.0

[MarvinKlein1508]

Hi! Thanks for contacting me. I will try and take a look on this by tomorrow.

It would help me a lot if you could provide a small example repository as I'm not this familiar with MudBlazor.

Thanks! -Marvin

[MarvinKlein1508]

Good morning!

Please try this one out:

@using MudBlazor
@using SignaturePad

<MudDialog>
    <DialogContent>
        <SignaturePad @ref="_signaturePad" @bind-Value="bSignature" ShowClearButton="false" style="max-width: calc(100vw - 3rem); width: 800px" />
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Clear">Clear</MudButton>
        <MudSpacer />
        <MudButton OnClick="Cancel">Cancel</MudButton>
        <MudButton Color="Color.Error" OnClick="Submit">Sign Document</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    public byte[] bSignature { get; set; } = Array.Empty<byte>();
    public string SignatureAsBase64 => System.Text.Encoding.UTF8.GetString(bSignature);

    private SignaturePad _signaturePad = default!;

    protected override void OnInitialized() {

    }

    void Submit() => MudDialog.Close(DialogResult.Ok(true));
    void Cancel() => MudDialog.Cancel();
    private async Task Clear() {
        await _signaturePad.Clear();
        Console.WriteLine($"Signature cleared {bSignature.Length}");

        StateHasChanged();
    }
}

[dngrozdanov]

Hi @mouse0270, you can also try to re-render the dialog after clean, there is a method in MudDialogInstance, to force re-render of the component. StateHasChanged is not working properly with MudDialogs.

[MarvinKlein1508]

I'm closing this one for now since there was no more activity. Please create another issue if this still persists.