SAP / fundamental-ngx

Fundamental Library for Angular is SAP Design System Angular component library
https://sap.github.io/fundamental-ngx
Apache License 2.0
266 stars 126 forks source link

CxSideNav component does not properly highlight menu items provided with ngTemplateOutlet #12353

Open amakarenko-sap opened 1 month ago

amakarenko-sap commented 1 month ago

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 items

Screenshot 2024-09-02 at 18 55 27

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.

droshev commented 5 days ago

@mikerodonnell89 Do you think you can check this out? thanks