DatePicker set focus to input control after a user selecting date on date-picker's calenadar

[topguss]

When select date on calendar, input control should get focus.

[pkozlowski-opensource]

@topguss any particular guidelines / recommendations that would justify this behaviour? I just tested a couple of datepickers on well-known sites and I can't see this behaviour being implemented systematically.

Please provide any additional info that would help us decide if this is the right behaviour to implement.

[pkozlowski-opensource]

BTW, the title of this issue says "DateTimePicker" but we don't have date-time picker widget here. I assume you've meant date-picker?

[topguss]

Yes, you are right, I mean about date-picker.

When you working on enterprise application, you need to provide good user experience, so that user can easy move through form's controls. There is problem if focus become lost. You can not select next control easy, especially if user request Features "next control on enter (enter key press)".

In the data-pickers base on jquery, developers were subscribe on some event and handle it.

The second reason we need this functionality is absent of support for Date type in a model. So, to handle this, we need to have pipe to transform Date to NgbDataStruct, then CustomNgbDateFormatter to transform NgbDataStruct to requested date format (eg. dd.MM.yyyy). Because angular's pipe does not provide 'revers transform method' (eg. parse) we need to handle view->model binding separately.
We can not use the event NgModelChanged because it will be occur every time user make a key press. (Here is a problem because date is note complete, and we cannot create valid Date object. In that case model become null and the date-picker will reset entered text. If we try to create valid Date object using current month and year, the date-picker will update entered text and cursor position will be moved to the end of date).
The solution is if we use binding view->model on blur event. And in that case the date-picker work fine, until a user try to pick date from date-picker's calendar. In that case we lost focus on the control and the blur event never happened. We did not find solution to put focus on the date-picker without adding code to component (ts) file - which is bad practice because our component become dependable form date-picker.

So, please handle this request. :-)
Cheers!

[liyokuna]

Hello all,
To Team nb-boostrap (@pkozlowski-opensource ), that will be awesome, to have the focus set on the input after selecting a date on the calendar.
So far nvda or jaws, can't read out when a date is selected and that can be confusing to some users.
Are you guys considered improving it ?
If it is not, I will probably do a PR...

B.R

[liyokuna]

Plus, adding aria-expanded on the datepicker pop up, It will be awesome. On my side, using your date picker, I was able to add aria.haspopup on the button opening the calendar, a setfocus on the input when using button for selecting today date.
check this

[maxokorokov]

At the moment we have a bug, that we lose focus completely after the datepicker closure (#3317). We'll fix it by restoring focus to what was focused before the datepicker was opened. If it was opened from the input → input will be refocused, if it was opened from the triggering button → the triggering button will be refocused.

If you don't like re-focusing of the triggered button, you can always FORCE restore focus to the input via the (closed) output:

<input #i ngbDatepicker (closed)="i.focus()" />

[AhHa45]

@maxokorokov I dont understand how your last comment is anyhow related to the feature request?
We simply want the input field to be focused, so the user can type in a date without clicking on the input again.
What has the (closed) event to do with it? The datepicker popup should still be visible, so the closed event should never be called in this use case. Can you explain what the purpose of your comment was? Thank you in advance.