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.