angular material (datepicker) focus is on body after any keyboard based operation

[eladh]

Actual Behavior:

Its seems that ever keyboard based operation with the date-picker don't return the focus back to the date picker input or button.
As a result the tab indexing is back to the first element.

you can take example with the official demo:
looking at the sources and debugging - its seems that focus operation is triggered on the relevant element but even so - the focus changed to to the document body.

CodePen
https://material.angularjs.org/latest/demo/datepicker

Angular Versions: - latest

Additional Information:

• Browser Type: * chrome

[crisbeto]

It seems to work when triggering from the input, but not from the buttons. Definitely a bug.

[eladh]

Thanks @crisbeto
I must mention that the same behavior also happens on autocomplete when pressing escape - the active element is also changed the document body.

Thanks
elad.

[crisbeto]

I had some time to look into this. I haven't found a good solution yet, but here's some info for future reference:

1. The calendar icon doesn't refocus properly if the user clicks on the icon directly. It seems to be because the SVG element inside doesn't propagate the focus event. If the user clicks around the SVG, then refocusing works.
2. I still haven't found what causes the body to be focused (it might be the backdrop after it's closed, or the calendar directive), but refocusing the triangle also works if it's wrapped in an rAF call.