Completed
Last Updated: 04 May 2022 08:01 by ADMIN
Release 3.3.0
Dorian
Created on: 03 Jul 2021 08:07
Category: TimePicker
Type: Bug Report
3
TimePicker does not focus its input when a popup button is clicked

On the DateTimePicker, when the "Set" button is clicked, the focus is given to the DateTimePicker field, so when the user clicked outside the component, the OnChange event is fired.

But the behaviour of the TimePicker is different. Indeed, after clicking on the "Set" button the TimePicker field does not get the focus, so the user can't click outside of it to fire the OnChange event.

The following code allows to manually set the focus on each ValueChanged event, but because of it the two-way binding can't be used. This code allows the TimePicker to have the same behaviour than the DateTimePicker :


<TelerikTimePicker @ref="@timepicker" Value="MyDate" OnChange="MyDateChanged"
    ValueChanged="@((DateTime d) => { MyDate = d; timepicker.FocusAsync(); })"></TelerikTimePicker>

@code {
    private DateTime MyDate { get; set; }
    private TelerikTimePicker<DateTime> timepicker;

    public void MyDateChanged(object theUserInput)
    {
        Console.WriteLine("Event OnChange fired");
    }
}

---

ADMIN EDIT

Reproducible

1. Go to the TimePicker demo https://demos.telerik.com/blazor-ui/timepicker/overview
2. open the popup
3. set a time with the Set button

**Note**: same goes for the Cancel button

### Current

focus goes somewhere (maybe on the body)

### Expected

focus goes to the input of the time picker

---

1 comment
ADMIN
Joana
Posted on: 04 May 2022 08:01

Hello everyone,

The fix is included in our 3.1.0 Telerik UI for Blazor version. However, the visible version here is 3.3.0 that is about to be released next week because we inlcuded additional focus fixes.

Regards,
Joana
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.