Datepicker keyboard navigation on Chrome doesn't work

[riy]

Bug description:

There seems to be an issue with keyboard navigation on the Datepicker component, when using (latest) Chrome. On Firefox and Safari things work fine.

Link to minimally-working plunker that reproduces the issue:

http://angular-ui.github.io/bootstrap/versioned-docs/1.3.1/

• Scroll down to "Datepicker"
• Click on any date
• Now try using the left, right, up & down keys on the keyboard
• Try this in Chrome and in Firefox

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.3
UIBS: 1.3.1
Bootstrap: 3.3.6

Operating system

I tested this on Mac OSX 10.11.4 (Chrome 49.0.2623.110 (64-bit), Firefox 41.0.1, Firefox 45.0.1, Safari 9.1 (11601.5.17.1)) and Windows 7 (Chrome 49.0.2623.110 m). Same problem on both.

History

This issue came up with v1.0.0 and v0.14.3 was the last version that was working fine.

Unfortunately, as Java-guy, I'm not proficient enough in JavaScript to create a PR, but maybe you guys know what's happening here. Did the behavior change intentionally or is it something about Chrome?

[deeg]

This seems to be working for me.

I am testing on:
Mac OSX 10.10.5
Chrome Version 49.0.2623.110 (64-bit)

[riy]

Thanks for testing this, Dan. I just tested this again, on another (older) MacBook Pro - same problem there. It's definitely not the setup on my machine. You and I are both testing this on the same Chrome version, only the Mac OSX version differs. But then again, I had the same issue on Windows/Chrome.

Did you use the link mentioned above?

[deeg]

@riy, yes using the link you provided, I went down to either the datepicker or datepicker popup section and opened the calendar. Then I started to use the arrow keys to switch to different dates, and enter to select that date.

Are you seeing any errors in the console?

[riy]

There are no errors at all in the JavaScript console. I also tried this in Chrome's incognito mode, hoping that maybe it's just some add-on interfering with the JavaScript, but that also didn't work. Also my colleagues with their Macs and Windows machines are having the same issue, not just me.

I have also tested this locally, as I thought maybe the company proxy server/firewall is messing with the JavaScript, but same issue here.

[riy]

Hey, I just tested the datepicker-popup - that one works fine!
Then I went back to the datepicker and switched to the next month, but didn't select a date, just started using the keyboard - that also worked fine.

So what happens is when a date is selected using the mouse (meaning: when you click on a date and that date gets a blue background) then the keyboard navigation stops working.

[deeg]

Even after clicking a date and selecting it with the mouse, I can then start using the arrow keys to start choosing a new date and move around the calendar. Maybe a video of the steps to reproduce it would be helpful

[riy]

I managed to find a solution for our particular problem (using keyboard navigation in automated Protractor testing for choosing a date x days in the future) but the problem itself remains.

Maybe someone else reading this can test this as well?

[icfantv]

I can confirm this is an issue on our demo page, but only in Chrome. I did not test with all my extensions disabled. Just use the displayed datepicker, don't use the popup to see the issue.

It works fine in Safari and Firefox so I'm going to suggest this issue be closed as a browser issue and there's most likely nothing we can do about it.

[wesleycho]

This looks like an issue with focus management in Chrome. We need to look into this, but I think this is a bug.