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