Dialog Focus Management broken

[Hirse]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Tabbing through the elements of the dialog will keep focus inside of the dialog element, wrapping back to the first tabbable element when reaching the end of the tab sequence.
(see https://material.angular.io/components/dialog/overview#focus-management)

What is the current behavior?

Tab focus leaves the dialog.

What are the steps to reproduce?

https://material.angular.io/components/dialog/overview
https://stackblitz.com/angular/nvvoleongadd

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

Current (or the one used for the Angular Material website).
Observed in Firefox and Chrome.

Firefox:

Chrome:

It might not be easy to see, but the focus is on the first button in the header.

[crisbeto]

That's because we haven't set up our demo correctly. It was fixed as a part of #9021.

[Hirse]

The PR you reference was merged, but I can still observe this bug in both, the Website and the Stackblitz example.

[crisbeto]

I don't remember whether we've deployed the site since then. You might be getting a cached version as well.

[Hirse]

The Stackblitz seems to have the changes from the PR.
https://github.com/angular/material2/blob/c3d7cd96de6f06e1530658e41d1e8aa3ba74805e/src/material-examples/dialog-overview/dialog-overview-example-dialog.html#L10

---

btw, if setting cdkFocusInitial is required for the focus trap to work, it should be included in the documentation.

[crisbeto]

It's not required for the focus trapping to work, but it can be used to tell the focus trap what to focus first.

[Hirse]

That attribute is the only thing that was added in the PR you linked (apart from the order of the buttons).
If it is not required, why was that PR supposed to fix the problem I reported?

[crisbeto]

The tabindex was removed from the buttons as well. This is what breaks the focus trapping.

[Hirse]

I like that note.

The tabindex also has to be removed from the input to fix the focus:
https://github.com/angular/material2/blob/39805d46c36d7823246787fcb45bda32d1256c57/src/material-examples/dialog-overview/dialog-overview-example-dialog.html#L5

[walhow]

The stackblitz works for tabbing, but does not handle mouse clicks outside the modal. I really need this functionality, any ideas how to implement? edit: face-palm, just found input parameter 'disableClose', works fine!

[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.}