-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Datepicker - close calendar after selecting date using keyboard #7142
Comments
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.? 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 |
@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... |
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 |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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
The text was updated successfully, but these errors were encountered: