Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 11 Mar 2025 07:17 by ADMIN
Kellen
Created on: 29 Apr 2024 14:56
Category: DateTimePicker
Type: Bug Report
2
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:
4 comments
ADMIN
Radko
Posted on: 11 Mar 2025 07:17

Hello Nathan,

This bug report is about the DateTimePicker, and more specifically about the fact selected time segments within the time picker portion of the popup are not persisted, which seems to be  caused by an additional re-rendering that occurs when the component is inside an Action Sheet.

As for the r.isParent is not a function error reported in the Kellen's comment - this should now be resolved, as we did added defensive checks a while ago. I myself can no longer reproduce the error locally.

Given your report is for a different issue with a different component, I recommend you open a separate ticket where you can provide us with more information about the issue at hand, such as the used product version. Attempting to replicate the issue on my end with the code you have provided does not result in the described error.

Regards,
Radko
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

Nathan
Posted on: 04 Mar 2025 14:50

Error:

Nathan
Posted on: 04 Mar 2025 14:48

I'm getting the same *.isParent error, but for the TelerikAutoComplete component when AdaptiveMode is set to auto and the autocomplete field is embedded in the WindowContent of a Telerik Window in the following form:

 

        <div class="m-2">
            <div class="k-form-field">
                <label for="select-customers" class="k-label k-form-label mb-1">Select Recipients:</label>
                <div class="k-form-field-wrap">
                    @if (graph.groupsAndUsers.Count == 0)
                    {
                        <em>Loading...</em>
                    }
                    else
                    {
                        <TelerikAutoComplete Data="@graph.groupsAndUsers"
                                             ValueField="@(nameof(IRecipient.DisplayName))"
                                             @bind-Value="@autoCompleteUser"
                                             OnChange="@OnAutoCompleteChange"
                                             AdaptiveMode="@Telerik.Blazor.AdaptiveMode.Auto"
                                             Filterable="true"
                                             FilterOperator="@StringFilterOperator.Contains"
                                             Id="select-users"
                                             Placeholder="Add a Recipient">
                            <HeaderTemplate>
                                Header
                            </HeaderTemplate>
                            <ItemTemplate>
                                <div class="d-flex flex-row flex-nowrap align-items-center justify-content-start">
                                    <MessengerUserImage Recipient="@context" Size="30" Rounded="true" Class="me-2" />
                                    <strong>@context.DisplayName</strong>
                                </div>
                            </ItemTemplate>
                            <FooterTemplate>
                                Footer
                            </FooterTemplate>
                            <NoDataTemplate>
                                <div>
                                    No items to display...
                                </div>
                            </NoDataTemplate>
                        </TelerikAutoComplete>
                    }
                </div>
            </div>
        </div>
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!
Create an account Log In
View
Type
Status
Category