Unplanned
Last Updated: 06 May 2024 05:46 by ADMIN
Kellen
Created on: 29 Apr 2024 14:56
Category: UI for Blazor
Type: Bug Report
1
DateTimePicker AdaptiveMode.Auto not working beyond simplest example

I've determined that the TelerikDateTimePicker does not work properly on mobile devices when using AdaptiveMode.Auto. Attached are videos of the component's behaviour in both modes (None, and Auto).

Immediately after interacting with the fullscreen popup of the datepicker, I see this error in the console:

RAW:
telerik-blazor.js:50 Uncaught TypeError: r.isParent is not a function

    at p.isChild (telerik-blazor.js:50:1362352)
    at f.closePopup (telerik-blazor.js:50:1398427)
    at HTMLHtmlElement.onMouseDown (telerik-blazor.js:50:1397246)

Code:

@using Telerik.Blazor.Components
@using Telerik.Blazor

<TelerikFloatingLabel Text="Date & Time">
    <TelerikDateTimePicker Id="date-picker" @bind-Value="MyFormModel.Date" Max="@DateTime.Now.AddDays(1)"
                           Format="@DATE_FORMAT" AdaptiveMode="AdaptiveMode.Auto"
                           FillMode="@Telerik.Blazor.ThemeConstants.DateTimePicker.FillMode.Flat" />
</TelerikFloatingLabel>
@code {
    private FormModel MyFormModel { get; set; } = new FormModel();
    private const string DATE_FORMAT = "MM/dd/yyyy HH:mm";

    private class FormModel
    {
        public DateTime Date { get; set; }
    }
}

Notes:
- If we remove all of the parent components wrapping the DatePicker, it seems to function properly, but the errors remain in the console. This isn't a solution, however.

Attached Files:
1 comment
ADMIN
Radko
Posted on: 06 May 2024 05:46

Hello Kellen,

Indeed I was able to reproduce the issue you have described - it manifests only if the DateTimePicker is wrapped in a FloatingLabel component. It seems that the label is introducing some additional, unnecessary re-renders, which are causing the time picker to reset to its initial value. 

As you are the author of this thread, you will receive updates as soon as we start looking into this.

As for the meantime, I was unable to come up with a workaround, besides the obvious one of not using the combination of a date time picker and floating label together.

Regards,
Radko
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!