Open wangzixi-diablo opened 3 years ago
tobi-or-not-tobi
commented
3 years ago @wangzixi-diablo can you experiment with delaying the creation of the anchor link until the data is ready? For example if you put an ngIf on the anchor link so that the link (and the cxFocus directive) is only initialised when the data is ready?
If that works, we can further investigate to bring a feature in the cxFocus directive, to understand when an element becomes accessible.
wangzixi-diablo
commented
3 years ago In Unit-details.component.html, I wrap a tag inside a div element, then put [cxFocus] directive on div element. If I directly put [cxFocus] on element, it will have tab-index = -1 set, so cannot retrieve any tab focus manually done by end user in the future.
When I switch to another unit in the same page, say subQD, according to Tobias, the Edit element in page should still be automatically focused.
As far as I know:
when users select another row in unit table in left cx-view, the right cx-view instance is not re-created. The singleton cx-view is reused, with latest unit detail fetched from backend and rendered.
when latest data is returned, no UI related event like focus or escape event is fired. And currently, the logic for various focus directive are implemented in ngAfterViewInit, which never gets called when cx-view is refreshed with latest data.
And I don't think we should implement ngAfterViewChecked hook in directive, as this hook will be called too frequently as documented in Angular help.
In a word, how can our focus directive react when a view is refreshed with latest data from backend?
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:
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.