The issue is related to fdx-side-nav component. If the menu item (<li fdx-nested-list-item>) is stored in the <ng-template> and declared with <ng-container *ngTemplateOutlet="templateListItem"></ng-container>, Cx Side Nav does not count it when highlighting selected/not selected menu items
Can you handle that on the application side
Can make it better using routerLinkActive directive, but still not everything can be fixed by this "workaround" (see stackblitz section)
Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)
Angular: 18.2
fundamental-ngx: 0.52.1
Previous versions of fundamental-ngx are also affected
If this is a bug, please provide steps for reproducing it; the exact components you are using;
(See stackblitz section)
Please provide relevant source code (if applicable).
(See stackblitz section)
Please provide stackblitz example(s).
https://stackblitz.com/~/github.com/alex-makarenko/fdx-side-nav-bug
See app.component.html for details, Template List Item menu item is provided by ngTemplateOutlet.
Steps to reproduce the bug:
1) Click on Template List Item (it gets selected)
2) Click on any other list item, e.g. (Nested List Item)
Template List Item remains selected. It is not taken into account by Cx Side Nav component when calculating selected/de-selected menu items.
https://stackblitz.com/~/github.com/alex-makarenko/fdx-side-nav-bug/tree/routerLinkActive (workaround)
I use here [routerLink]="['/nested-list-item']" routerLinkActive="is-selected" to manually control selected state. Even in this example, a part of the issue still there:
1) Click on Template List Item (it gets selected)
2) Click on Nested List Item (it gets selected, previous item is deselected)
3) Click back on Template List item
Nested List group remains selected
In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.
-
Did you check the documentation and the API?
Yes
Did you search for similar issues?
Yes
Is there anything else we should know?
-
IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.
Is this a bug, enhancement, or feature request?
Bug
Describe your proposal.
The issue is related to
fdx-side-nav
component. If the menu item (<li fdx-nested-list-item>
) is stored in the<ng-template>
and declared with<ng-container *ngTemplateOutlet="templateListItem"></ng-container>
, Cx Side Nav does not count it when highlighting selected/not selected menu itemsCan you handle that on the application side
Can make it better using
routerLinkActive
directive, but still not everything can be fixed by this "workaround" (see stackblitz section)Which versions of Angular and Fundamental Library for Angular are affected? Please, specify the exact version. (If this is a feature request, use current version.)
Previous versions of
fundamental-ngx
are also affectedIf this is a bug, please provide steps for reproducing it; the exact components you are using;
(See stackblitz section)
Please provide relevant source code (if applicable).
(See stackblitz section)
Please provide stackblitz example(s).
https://stackblitz.com/~/github.com/alex-makarenko/fdx-side-nav-bug See
app.component.html
for details,Template List Item
menu item is provided byngTemplateOutlet
. Steps to reproduce the bug: 1) Click onTemplate List Item
(it gets selected) 2) Click on any other list item, e.g. (Nested List Item
)Template List Item
remains selected. It is not taken into account by Cx Side Nav component when calculating selected/de-selected menu items.https://stackblitz.com/~/github.com/alex-makarenko/fdx-side-nav-bug/tree/routerLinkActive (workaround) I use here
[routerLink]="['/nested-list-item']" routerLinkActive="is-selected"
to manually control selected state. Even in this example, a part of the issue still there: 1) Click onTemplate List Item
(it gets selected) 2) Click onNested List Item
(it gets selected, previous item is deselected) 3) Click back onTemplate List item
Nested List
group remains selectedIn case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.
-
Did you check the documentation and the API?
Yes
Did you search for similar issues?
Yes
Is there anything else we should know?
-
IMPORTANT: Please refrain from providing links or screenshots of SAP's internal information, as this project is open-source, and its contents are accessible to anyone.