Issues with signature control

[Michael Salzlechner]

placing a signature control in a SfDialog and running into a number of issues

sometimes on the first popup of the dialog the signature control seems to not get activated properly 

if i just have a signature control at this time it has no size. if i force the size via CSS it does the following

when i try to draw i get the following error

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

    at e.updateSnapCollection (https://localhost:44336/_content/Syncfusion.Blazor.Inputs/scripts/sf-signature.min.js?v=20.3.57:1:10453)

    at e.mouseUpHandler (https://localhost:44336/_content/Syncfusion.Blazor.Inputs/scripts/sf-signature.

then when i close and reopen the dialog i get the following error 

Uncaught TypeError: Cannot read properties of null (reading 'length')

    at e.endDraw (sf-signature.min.js?v=20.3.57:1:7490)

    at e.mouseUpHandler (sf-signature.min.js?v=20.3.57:1:3648)

but now the signature control works

the error above is now shown on any page load even if there is no signature control on that page so something stays left behind

[YuvanShankar Arunagiri]

Hi Michael,

We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet. The signature pad render depends on parent div element height and width. Initially, the dialog component height and width were 0. So, only signature pad render with 0 height and width. To resolve this issue, render the signature pad in Opened event of the dialog component.

<SfDialog Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">

        <DialogTemplates>

            <Content>

                @if(isOpen) {

                                                            <SfSignature></SfSignature>

                                              }

            </Content>

        </DialogTemplates>

        <DialogEvents Opened="@OnOpenHandler" Closed="@DialogClosed"></DialogEvents>

    </SfDialog>

….

 

private void OnOpenHandler(Syncfusion.Blazor.Popups.OpenEventArgs args)

    {

        this.ShowButton = false;

        isOpen = true;

    }

 

    private void DialogClosed(CloseEventArgs args)

    {

        this.ShowButton = true;

        isOpen = false;

    }

Could you please check with attached sample and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: SignatureSample_8e799738.zip