Unplanned
Last Updated: 27 Jul 2023 11:38 by ADMIN
Minto
Created on: 21 Jul 2023 07:49
Category: DateTimePicker
Type: Bug Report
0
When typing a date or date/time field, they jump all over the place/glitch
In our serverside blazor application we use the Telerik's DateTimePicker. When we type values in to the date time picker control, it jumps to the next section or to the end before completing the currect section. We use the format 'yyyy-MM-dd HH:mm'

It does not happen always and I think it is happenning when the internet connection is slow and it shows a Javascript error as well (screenshots below)
1 comment
ADMIN
Dimo
Posted on: 27 Jul 2023 11:38

Hello Minto,

I made some experiments and your observation is correct - when the internet bandwidth is very low, the DateInput can behave erratically. It depends on the typing speed and the internet speed. The latency doesn't seem to matter.

As far as I can see, you can mitigate the problem by setting DebounceDelay="0". This made a difference on my side when I tested with throttled internet speed in the browser's developer settings. If this is not desired or not enough in your case, then the remaining option is to disable DateInput typing by setting the <input>'s readonly attribute with JavaScript. This will force users to select date and time from the component popup.

@inject IJSRuntime js

<TelerikDateTimePicker @bind-Value="@DateValue"
                       Format="yyyy-MM-dd HH:mm"
                       Width="200px"
                       Class="readonly-dateinput" />


<script suppress-error="BL9992">
    // Move to a separate JS file in production
    function makeDateInputsReadOnly() {
        var inputs = document.querySelectorAll(".readonly-dateinput input");
        inputs.forEach( (input) => {
            input.setAttribute("readOnly", true);
        } );
    }
</script>

@code {
    DateTime? DateValue { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await js.InvokeVoidAsync("makeDateInputsReadOnly");
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}

If you target users with typically low internet speed, then a WebAssembly or Hybrid app may be a better choice. These will perform a lot better with bad internet connection or in offline mode. In general, Blazor Server apps with rich interactive UI components require good internet connection for all the SignalR back and forth exchange.

Of course, the least we can do is avoid the JS error. I hope the developers can think of something about the unexpected typing experience too.

I am awarding you some Telerik points for the bug report. Thanks!

Regards,
Dimo
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!