The issue occurs only if the Signature is initially rendered in a container with display: none style. If I use visibility: hidden, I don't see a problem.
Real use case in which this is a problem: an accordion where the second pane is not opened.
Reproduction code: https://blazorrepl.telerik.com/QfYeuZPv28LlBmBx56.
Steps to reproduce:
If the Signature Width or Height parameter values change at runtime, the drawing position no longer matches the cursor position. For example, if the Signature size increases, the drawing position will move down and right, and vice-versa.
A possible workaround is to recreate the component after changing the dimensions:
Signature Width: <TelerikNumericTextBox @bind-Value="@NumValue" Width="120px" />
<TelerikButton OnClick="@ResizeSignature">Resize Signature</TelerikButton>
<br /><br />
@if (ShowSignature)
{
<TelerikSignature @bind-Value="@SignatureValue"
Width="@( $"{SignWidth}px" )"
Height="@( $"{SignHeight}px" )"
Maximizable="false">
</TelerikSignature>
}
@code {
private string SignatureValue { get; set; }
private int NumValue { get; set; } = 300;
private int SignWidth { get; set; }
private int SignHeight { get; set; }
private bool ShowSignature { get; set; } = true;
async Task ResizeSignature()
{
ShowSignature = false;
SignWidth = SignHeight = NumValue;
await Task.Delay(1);
ShowSignature = true;
}
protected override void OnInitialized()
{
SignWidth = SignHeight = NumValue;
base.OnInitialized();
}
}