Cursor in TelerikTextBox flickers for every character entered in TelerikGrid (Blazor)

73 views Asked by At

I have a TelerikTextBox control inside a GridColumn in TelerikGrid. The cursor inside the textbox flickers for every character entered causing a very bad user experience.

I tried removing @bind-value and having just OnChange() or OnBlur as I learned @bind-value and OnChange do not go well together but then I get
Error: System.InvalidOperationException: Telerik.Blazor.Components.TelerikTextBox requires a value for the 'ValueExpression' ValueExpression is provided automatically when using 'bind-Value'

<TelerikGrid>
<GridColumns>
<GridColumn Title="NewTitle" OnCellRender="_editableSource.SetEditableCellCss" Width="320px">
                                            <Template>
                                                @if (context is UserModel con)
                                                {
                                                    <EditableDataGridField Model="@con" For="@(() => con.UserIdentification)" EditContext="_pageRef.EditContext">
                                                        <ViewTemplate>
                                                            <span data-someValue="@con?.UserIdentification">@con?.UserIdentification</span>
                                                        </ViewTemplate>
                                                        <EditTemplate>
                                                            <TelerikTextBox @bind-Value="UserIdentification" OnChange="() => UserIdentification_OnChangeAsync(con)" />
                                                        </EditTemplate>
                                                    </EditableDataGridField>
                                                }
                                            </Template>
                                        </GridColumn>
</GridColumns>
</TelerikGrid>

There is a similar logic in another page which works perfectly fine, only difference is that this is not inside a TelerikGrid. And I tried using TelerikTextBoxStyled as well but it wouldn't work

TelerikTextBoxStyled.razor is as below

@inherits TelerikStyledBase.TelerikTextBoxStyledBase

<StyleComponent Source="@this" Name="">

</StyleComponent>

@BaseContent

@code {

    protected async override Task OnApplyStyleAsync(StyleParameters styleParameters)
    {
        if (styleParameters.IsDefaultStyle())
        {
            styleParameters.SetParameter(() => this.DebounceDelay, 1000);
        }
    } 
}
0

There are 0 answers