[P2][Sourcing] Breadcrumb does not pass click when collapse in the menu

[oscargong]

Is this a bug, enhancement, or feature request?

enhancement or feature request

Describe your proposal.

In breadcrumb-item.component.ts :

get _needsClickProxy(): boolean {
        return  !!this.breadcrumbLink?.elementRef.nativeElement.getAttribute('href') || !!this.breadcrumbLink.routerLink;
    }

But we cannot use simply use href attribute or routerLink directive. We are handling click event manually in the fd-breadcrumb-item

However, If breadcrumb is in a menu, (click) event won't be trigger

Can you handle that on the application side

No workaround from my application

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.)

V0.49.3

If this is a bug, please provide steps for reproducing it; the exact components you are using;

Please provide relevant source code (if applicable).

<fd-breadcrumb class="breadcrumb-style" *ngIf="containsCurrentInBreadcrumbs() ? breadcrumbs.length > 1 :  breadcrumbs.length >0">
    <ng-container *ngFor="let bc of breadcrumbs">
        <fd-breadcrumb-item>
            <a *ngIf="bc.routerLink" fd-breadcrumb-link (click)="breadscrumbClick(bc)">{{bc.name}}</a>
        </fd-breadcrumb-item>
    </ng-container>
</fd-breadcrumb>

Please provide stackblitz example(s).

In case this is Accessibility related topic, did you consult with an accessibility expert? If not, please do so and share their recommendations.

Not an ADA issue

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]

@oscargong We couldn't understand the problem and the use case. Do you think you can elaborate more?

[oscargong]

Hi @droshev

I made a stackblitz example:

https://stackblitz.com/edit/e2njgi?file=src%2Fapp%2Fbreadcrumb-routerLink-example.component.html

Also a screen recording:

https://github.com/SAP/fundamental-ngx/assets/7035787/72474bab-9cc1-4b7f-a0ae-10a1148a2379

I have a (click) event bind to the <a> inside the fd-breadcrumb-item. But this click event will only be trigger when the item is not folded into the menu.

I added a example to the doc will also be helpful to understand the issue we met: https://deploy-preview-11686--fundamental-ngx.netlify.app/#/core/breadcrumb#proxy-link

Thanks Oscar

[droshev]

Hi @droshev

I made a stackblitz example:

https://stackblitz.com/edit/e2njgi?file=src%2Fapp%2Fbreadcrumb-routerLink-example.component.html

Also a screen recording:

Oscar.ScreenCapture.2024-04-04.at.09.28.mp4 I have a (click) event bind to the <a> inside the fd-breadcrumb-item. But this click event will only be trigger when the item is not folded into the menu.

I added a example to the doc will also be helpful to understand the issue we met: https://deploy-preview-11686--fundamental-ngx.netlify.app/#/core/breadcrumb#proxy-link

Thanks Oscar

Why can't you use route Guards ?

[oscargong]

Hi @droshev I made a stackblitz example: stackblitz.com/edit/e2njgi?file=src%2Fapp%2Fbreadcrumb-routerLink-example.component.html Also a screen recording: Oscar.ScreenCapture.2024-04-04.at.09.28.mp4 I have a (click) event bind to the <a> inside the fd-breadcrumb-item. But this click event will only be trigger when the item is not folded into the menu. I added a example to the doc will also be helpful to understand the issue we met: deploy-preview-11686--fundamental-ngx.netlify.app/#/core/breadcrumb#proxy-link Thanks Oscar

Why can't you use route Guards ?

Route Guards is not enough. Here, when click on a table tree node, we recreate the table source. Breadcrumb is used to indicate the table tree node hierarchy, not route.

https://github.com/SAP/fundamental-ngx/assets/7035787/42afc013-bf5f-4895-9ff6-a1f477bb4056

[droshev]

Breadcrumb is used to indicate the table tree node hierarchy, not route.

@oscargong are you using the breadcrumb to manipulate the tree? It doesn't seem correct usage of it.

[oscargong]

Breadcrumb is used to indicate the table tree node hierarchy, not route.

@oscargong are you using the breadcrumb to manipulate the tree? It doesn't seem correct usage of it.

We are using the breadcrumb to show the hierarchy of the table.

I think this is fine use case as guideline:

[oscargong]

Could we have an EventEmitter similar to the item-click event in UI5-WebComponent?

https://sap.github.io/ui5-webcomponents/components/BreadcrumbsItem/