Datepicker - close calendar after selecting date using keyboard

[pchristou]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Datepicker calendar should close when current day or another day is selected via keyboard i.e. arrow keys + Enter.

What is the current behavior?

Datepicker calendar only closes when a date is selected using mouse.

What are the steps to reproduce?

Open the datepicker, use the arrow keys to select a date, press Enter. Datepicker calendar remains open and no selection is made.

The example datepicker exhibits the behaviour: https://material.angular.io/components/datepicker/examples

What is the use-case or motivation for changing an existing behavior?

Consistent behaviour with mouse vs keyboard. Better usability for users who traverse forms using a keyboard.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular v4, material 2.0.0-beta.10

[willshowell]

As you may have noticed, ESCAPE closes the datepicker. It looks like the reasoning may have to do with having the future possibility of confirmation buttons, time select, range select, etc.?

https://github.com/angular/material2/blob/df808b845c25d9f40d5bbeff7a7c4b206f26a0a1/src/lib/datepicker/datepicker.ts#L70-L76

Also if you wish to override this, you can manually close the datepicker on changes:

<md-form-field>
  <input mdInput [mdDatepicker]="picker" placeholder="Choose a date" (dateChange)="picker.close()">
  <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
  <md-datepicker #picker ></md-datepicker>
</md-form-field>

cc @mmalerba

[pchristou]

@mmalerba @willshowell thanks Will, that was helpful. That's solved 1 of the 2 problems.

Is there an event I can also latch onto when the user doesn't select a different date using the keyboard? I think the issue was discussed in detail here: #6323

I saw the (userSelection) event but that doesn't seem to be exposed to the date input. I'd rather not start modifying source code and adding a check for whether ESC OR Enter was pressed if I can help it...

[mmalerba]

I think it makes sense to change this to match mouse behavior for now and we can always change it again later if/when we add support for confirmation buttons

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}