cdkTrapFocus directive on MatDialog changes layout

[gtranter]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Dialog layout is unchanged by the use of cdkTrapFocus directive

What is the current behavior?

Using cdkTrapFocus directive on the mat-dialog-actions container inside a dialog adds space below the actions row.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-x8yrht

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

Angular 5.2.3 Material 5.1.1

Is there anything else we should know?

In the demo, open the dialogs and notice the difference in space below the action buttons.

[crisbeto]

It looks like it's because the selector that pulls the buttons down is .mat-dialog-actions:last-child. When adding a focus trap around it, a new element gets added after the actions which means that they're not the last element anymore. You should be able to work around it by adding the focus trap to a wrapper element inside the actions.

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