Set focus to Month on masked datepicker

[Keith A Price]

I've set up my DatePicker with a mask: M/d/yyyy.

whenever the component receives the focus, whether by tab or click, I'd like the M portion to be highlighted.

Right now, the focus ends up at the end of the mask (after the yyyy).

This is especially bad for touch typists when filling out a form. They should be able to Tab into it and immediately start typing the date.

Note: I've set up the picker's bind-value as a null date because I don't want the user to think it's already filled in. I want them to easily see they need to enter the date.

Note2: When I give a default date, the focus highlights the entire date and then when the User starts typing, it correctly modifies the month portion.

So, I basically want that behavior when it's just showing the Mask Placeholder ("day", "month", "year".

DESIRED BEHAVIOR: Picker gets focus and either the entire date (or Placeholder) is selected or just the M is. User types a one or 2 digit month and that get shown for the month. User presses Right Arrow to move to d and enters a one or 2 digit day, etc.

How can I do that?

[UdhayaKumar Duraisamy]

Query 1:

whenever the component receives the focus, whether by tab or click, I'd like the M portion to be highlighted.

DESIRED BEHAVIOR: Picker gets focus and either the entire date (or Placeholder) is selected or just the M is. User types a one or 2 digit month and that get shown for the month. User presses Right Arrow to move to d and enters a one or 2 digit day, etc.

When the user focuses on the component, the entire input is fully highlighted, and if the user starts typing, the input values are appended from the start. This is the intended behavior of the component. Additionally, the right and left arrow keys can be used to move the highlight inside the input. Please refer to the shared GIF for more clarification.

Query 2:

Right now, the focus ends up at the end of the mask (after the yyyy).

This is especially bad for touch typists when filling out a form. They should be able to Tab into it and immediately start typing the date.

We have considered the reported issue “The focus is not being properly added to the Blazor Masked DatePicker” as a bug from our end, and the fix for the issue will be included in any one of our upcoming patch releases.

You can now track the status of the feedback through the below link,

https://www.syncfusion.com/feedback/41159

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

[UdhayaKumar Duraisamy]

Query 2:

Right now, the focus ends up at the end of the mask (after the yyyy).

This is especially bad for touch typists when filling out a form. They should be able to Tab into it and immediately start typing the date.

We have fixed the reported issue “The focus is not being properly added to the Blazor Masked DatePicker” from our end in the latest 20.4.53 version. So, we suggest you upgrade to our latest version to resolve the current issue.

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/20.4.53?type=all#bug-fixes-3