Skip to content

MatButton : [attr.tabindex] does not appending explicit tabindex when rendered dynamically in dom #32930

@akshayjdv

Description

@akshayjdv

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

angular 19

Description

i have one use case in which i am adding drag handles button in my tab group when i am adding one new answer tab with help of external button click, so when one button is clicked, one new tab is added in my tab group and for that new tab , tab header should have drag handles button, now we want that focus behaviour should be like when i click tab first it should go to 1st tab header than drag handle button inside of 1st tab header, than inside tab body.
and drag handle button have this piece of code
[attr.tabindex]="scoreIndex === selectedAltAnswerSetTabIndex ? '0' : '-1'"
so that 2nd tab also have drag handles button but it should not take focus precedence,

now in angular 21, this [attr.tabindex]="scoreIndex === selectedAltAnswerSetTabIndex ? '0' : '-1'" is not working and now focus behaviour is, 1st tab header than drag handle button of first header and than drag handle button of 2nd header and than out side of that tabs,

if i use [tabindex]="scoreIndex === selectedAltAnswerSetTabIndex ? '0' : '-1'"
i am getting tab index behavior as per our expectation.

this issue is specifically observed when [attr.tabindex]="scoreIndex === selectedAltAnswerSetTabIndex ? '0' : '-1'" is set for matButton, as i have replaced matButton with div having role of button and that time it have tab index order as per our need.

anything is changed in matButton?

Reproduction

StackBlitz link:
Steps to reproduce:

  1. add dynamic button in dom, add [attr.tabindex]="some condition ? '0' : '-1'" on that button and see that this dynamically added button have tab index attribute or not

Expected Behavior

when mat button is rendered in dom dynamically, like added dynamically with if condition, that time if our condition of [attr.tabindex]="some condtion ? '0' : '-1'", it should have either tabindex="0" or "-1" in dom but it doesnt have tabindex attribute at all

Actual Behavior

when mat button is rendered in dom dynamically, like added dynamically with if condition, that time if our condition of [attr.tabindex]="some condtion ? '0' : '-1'", it should have either tabindex="0" or "-1" in dom but it doesn't have tabindex attribute at all

Environment

  • Angular: 21.1.4
  • CDK/Material:21
  • Browser(s):chrome
  • Operating System (e.g. Windows, macOS, Ubuntu):windows

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: material/buttongemini-triagedLabel noting that an issue has been triaged by geminineeds triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions