TimePicker within a ListView on mobile issues

[Daniel]

We recently came across a unique situation where if you try to use a TimePicker within a ListView on a mobile view, the user is unable to change the time. 

Issue: User is unable to switch time from the current value. If you try to select a different hour, minute, second, or AM/PM it snaps back to the current value and will never bind to a new value. If you switch out of mobile view the Adaptive Mode takes it out of full screen and it works. 

Recreation Steps:

• Create a ListView
• Create a TimePicker within the ListView
• Set the Adaptive Mode on the TimePicker to Auto (This is key, if this property is removed it works)
• Run the page and switch to a mobile view format within the browse

Work-Around: We replaced the ListView with some simple divs and then everything works as intended. Additionally you can also just remove the Adaptive Mode and it will work within a ListView but you no longer get the fullscreen view.


Example Code:

@page "/test-timepicker-listview"

<h3>TimePicker in ListView Test</h3>

<TelerikListView Data="@TestItems" Width="100%">
    <HeaderTemplate>
        <div style="padding: 10px; background-color: #f0f0f0; font-weight: bold;">
            Time Entry Items
        </div>
    </HeaderTemplate>
    <Template>
        <div style="padding: 15px; border-bottom: 1px solid #ddd;">
            <div style="margin-bottom: 10px;">
                <strong>Item:</strong> @context.Name
            </div>
            <div style="display: flex; align-items: center; gap: 10px;">
                <label>Start Time:</label>
                <TelerikTimePicker @bind-Value="@context.StartTime" Format="hh:mm tt" Width="150px"
                    AdaptiveMode="AdaptiveMode.Auto" />
            </div>
            <div style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
                <label>End Time:</label>
                <TelerikTimePicker @bind-Value="@context.EndTime" Format="hh:mm tt" Width="150px"
                    AdaptiveMode="AdaptiveMode.Auto" />
            </div>
        </div>
    </Template>
</TelerikListView>

@code {
    private List<TimeEntryItem> TestItems { get; set; } = new();

    protected override void OnInitialized()
    {
        // Initialize with some test data
        TestItems = new List<TimeEntryItem>
{
new TimeEntryItem { Id = 1, Name = "Morning Shift", StartTime = new DateTime(2025, 11, 18, 8, 0, 0), EndTime = new
DateTime(2025, 11, 18, 12, 0, 0) },
};
    }

    public class TimeEntryItem
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
    }
}