Skip to content

MatDialog - set focus on dialog itself #16190

Closed
@VVKot

Description

@VVKot

Bug, feature request, or proposal:

I have MatDialog which is used for confirming deleting the element. I want to place focus initially on the dialog itself.
Is there a proper way to do it? Meaning that "tab loop" would be like so:

  1. Dialog -> No button -> Yes button -> Dialog
    or, ideally, after jumping to buttons focus will be trapped there:
  2. Dialog -> No button -> Yes button -> No button -> Yes button

What is the use-case or motivation for changing an existing behavior?

Because of our app not having "trash bin" functionality as of now, deleting is permanent. So, I don't want to place focus on the "Yes" button.

Alternatively, I can place focus on the "No" button. But this would interfere with a highlight on the "Yes" button - I want to highlight intended action in the dialog.

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

"@angular/cdk": "~7.1.0",
"@angular/material": "~7.1.0",

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions