'How does the presence of routerLinkActive cause a mat-row to be focused
This is not really an issue, just trying to understand behavior better.
I have a mat-table which I had been handling click events from to highlight rows, and I'm switching now to make it work with a router instead.
When I add routerLinkActive to a mat-row and then click on the row it becomes highlighted. It turns out this is due to :focus being set for some reason which causes a blue outline.
<mat-row
matRipple
routerLink="doesnt/exist"
routerLinkActive="class-doesnt-even-exist"
*matRowDef="let row; columns: displayedColumns;"
(click)="alert('clicked')"></mat-row>
It isn't even an active route that is being highlighted, just the row I click on.
The docs for mat-table even says the following:
mat-table does not manage any focus/keyboard interaction on its own. Users can add desired focus/keyboard interactions in their application.
I've looked in the source for the router directives and don't see anything there about focus.
The problem can easily be solved by setting my own :focus selector, but I'm trying to understand what is causing this out of curiosity.
Here's a sample:
Solution 1:[1]
When you use tabindex="-1" there are some downfalls. You can no longer focus any child element inside there. Taking a look at the sourcecode for RouterLink we can see that Angular is looking for the presence of any tabindex attribute and if one exists, it will not monkey with the tabindex.
My solution then was to use tabindex="ignore" -- an intentionally invalid value. In practice, we get the best of both worlds: Angular does not add the tabindex attribute, and child elements can still be focused if they have tabindex, and the browser ignores the invalid value and doesn't consider it a tab stop.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | FirstVertex |