Components: Ability to set focus to specific element on MdDialog when opening

Created on 27 Apr 2017  路  5Comments  路  Source: angular/components

feature request

Ability to set focus to specific element on MdDialog when opening AND have all buttons included in the tab order

What is the expected behavior?

On a dialog with two or more buttons eg: [OK][Cancel] it would be nice to be able to set the tabindex on each (in my scenario OK=1 and Cancel=0) and have it focus to the button with the lowest tab index when the dialog opens.

This way you can tab between the buttons and have the default set to a button you specify with a tabindex of 0

What is the current behavior?

From the documentation
"Once a dialog opens, the dialog will automatically focus the first tabbable element.
You can control which elements are tab stops with the tabindex attribute
"

Using the scenario above it appears that it focuses on the first tabbable element in the dom (OK button in this instance) and the only way to get the Cancel button to be the default is to set the tabindex of OK to -1 which then means you can't tab between the buttons.

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

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

To have a tab order on buttons and set a specific button to be the default

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

"@angular/core": "^4.0.0",
"@angular/material": "^2.0.0-beta.3",
Windows 7
Chrome Version 58.0.3029.81 (64-bit)

Is there anything else we should know?

Most helpful comment

fixed by adding a cdk-focus-start attribute to the button required to be the default

All 5 comments

fixed by adding a cdk-focus-start attribute to the button required to be the default

FYI, cdk-focus-start is depricated, use cdk-focus-region-start instead.

cdk-focus-region-start is deprecated use cdkFocusRegionstart instead.

I used cdkFocusInitial and it worked :-)

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

xtianus79 picture xtianus79  路  3Comments

theunreal picture theunreal  路  3Comments

jelbourn picture jelbourn  路  3Comments

3mp3ri0r picture 3mp3ri0r  路  3Comments

savaryt picture savaryt  路  3Comments