After typing in the date input, its performance slows down in WebAssembly

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 18 Nov 2021 09:28 by ADMIN

Release 2.30.0

Stefano

Created on: 10 Nov 2020 08:32

Category: DateInput

Type: Bug Report

After typing in the date input, its performance slows down in WebAssembly

Create the WebAssembly CRUD example from the New Project Wizard and go to the Form page.

Type a year in the date picker. Do not remove the focus and type another year. After doing this a few times the input visibly lags and the form becomes slow.

---

ADMIN EDIT

A potential workaround could be to disable the pointer events so that the users will have a harder time focusing the input so they are more likely to use the drodown to choose dates:

   .k-datepicker .k-dateinput input {
        pointer-events: none;
    }

another approach is to avoid the two-way binding that happens on every keystroke, and use the OnChange event to update the model, for example:

<TelerikDatePicker Value="@person.StartDate"
                   OnChange="@( (object dt) => person.StartDate = (DateTime)dt )"
                   ValueExpression="@( () => person.StartDate )"
                   Width="100%" Id="StartDateDP">
</TelerikDatePicker>

---

5 comments

ADMIN

Marin Bratanov

Posted on: 25 May 2021 16:36

Hello David,

I am sorry to hear that. I would go as far as to say that if performance is critical for your app, perhaps WebAssembly is not yet ready for the prime time for your app. With .NET 6 and AoT things should improve, and at that time perhaps integration with native apps might also provide better performance by running the equivalent of server-side Blazor in a webview - one of those might help your app perform better. For the time being, I can suggest you consider whether the server-side flavor will work better for the needs you have.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

David

Posted on: 25 May 2021 16:28

This technique will faster but is still way to slow for our Government customer.

ADMIN

Marin Bratanov

Posted on: 24 Mar 2021 13:10

Hi Amanatios,

Your vote is taken into account and that raises the priority of the issue. For the time being you can try the workaround from the opener post, for me it gives me a few more entries before the performance deteriorates.

Editing is disabled to keep the integrity of the thread intact, edits at a later stage can disrupt the flow of the information. If by accident some confidential information was pasted, let us know and we can edit the post to remove it.

Regards,
Marin Bratanov
Progress Telerik

Amanatios Amanatidis

Posted on: 22 Mar 2021 19:37

Correction in my sample above (no editing in comments? )

Amanatios Amanatidis

Posted on: 22 Mar 2021 19:34

Happens to me too.

Very easy to reproduce.

Create a Blazor wasm project and add the telerik blazor components (v2.22)
Add the code below to a page
Pick a valid date using the dropdown
Click on the year part of the date inside the input and start typing valid years without leaving the input
e.g. 2001, 2002, 2003, 2004 etc
The picker starts to lag getting worse and worse

CODE:

@code{

public class MyPageModel
{
[Required]
public DateTime? MyDate { get; set; }
}

MyPageModel Model = new MyPageModel();

}