Requirement from https://github.com/SAP/spartacus/issues/9531

Current

While tabbing through the b2b table component, opening up a new section (on the right) is not making the focus to go to the newly opened section, but rather the focus stays where it was (where we pressed enter).

Expected

After opening up a new section, the focus should go to the first element of the section.

How to operate

Go to Unit list Component(let’s say Component A), use tab key to navigate to a give table row, press enter key:

expected behavior：Unit Detail Component(let’s say component B is opened)

The first focusable element in component B, in this case the Edit button, MUST BE FOCUSED automatically.

My failed attempt

add this line in unit-details.component.html:

[cxFocus]="{ autofocus: true }">

this approach does not work:

in debugging, although this.firstFocusable is successfully parsed to point to a.link.edit.disabled

Unfortunately at this timeslot, a tag has “disabled” class set because of line 6:

According to this stackoverflow thread, calling focus method on a disabled element will not work:

only till the time when Unit detail page finishes rendering and its data is loaded successfully, and then I could simply call its native focus() function, and this time it works.

So simply speaking, in my scenario, I would like the execution of following line 64, this.firstFocusable.focus() is delayed until the a.link.edit’s disabled class is removed.

更多Jerry的原创文章，尽在：“汪子熙”: