Using Telerik Blazor 4.0.1.  Previously on 3.5.0, there were no issues.  The only other difference is .NET 7.0.

Create a blank Telerik Blazor Server project and use the attached index.razor.  In the OnInitialized, there are two lines that set the DateTime.  The first one works but the second one results in the TelerikDateInput field showing h:mm AM instead of 12:00 AM.

Am I doing something wrong?  If so, what changed from 3.5 to experience this?

Thanks,

Chuck

Currently, if the component has DebounceDelay and loses focus before the delay has passed, the Blur event is fired before the ValueChanged event. 

This bug extends to DateInput, DatePicker, DateTimePicker, and DateRangePicker

If you use the FloatingLabel, when you tab into the DateInput control, the cursor is set at the very end of the text of the date format. However, if you do not use the FloatingLabel, and you tab into the DateInput control, the placeholder text is selected.

Reproduction: https://blazorrepl.telerik.com/wQlvclOZ14jEKaXU38.

===

ADMIN EDIT

===

The report is initially opened for DateInput, however, it also targets the rest of the date pickers that are compatible with FloatingLabel.

If you use the format "yyyy-MM-dd" type in a full value and go back to change the year part the focus changes to the month part.

For example enter 2022-01-10 and then go back with the mouse to the year part. Type in 20. The focus then changes to the month part before completing the year part.

This happens with other formats as well when you use MM. The leading zero seems to screw things up. If you play around with the control and changing stuff you will notice that the focus function does not work.

https://blazorrepl.telerik.com/GckPEjFb19imr0x607

Create the WebAssembly CRUD example from the New Project Wizard and go to the Form page.

Type a year in the date picker. Do not remove the focus and type another year. After doing this a few times the input visibly lags and the form becomes slow.

---

ADMIN EDIT

A potential workaround could be to disable the pointer events so that the users will have a harder time focusing the input so they are more likely to use the drodown to choose dates:

   .k-datepicker .k-dateinput input {
        pointer-events: none;
    }

<TelerikDatePicker Value="@person.StartDate"
                   OnChange="@( (object dt) => person.StartDate = (DateTime)dt )"
                   ValueExpression="@( () => person.StartDate )"
                   Width="100%" Id="StartDateDP">
</TelerikDatePicker>

---

Hi,

This is easily viewable in your demos.  Using Safari, go to:

https://demos.telerik.com/blazor-ui/dateinput/overview

Try to use keyboard arrows left and right and up/down to change date.  It doesn't hold the selected date part.  

Works fine in Chrome / Firefox.

Recreational steps:

1. Typed "05"

2. Typed "right arrow" (select month part)

3. Typed "03"

4. Typed "right arrow" (select year part)

5. Tried typing "2020"... but as you can see things went strangely.