<ui5-side-navigation> Event binding

[yolttt]

Describe the bug Hello, i'm using ui5-webComponents together with Blazor in order to adhere to standards of SAP. I used a lot of ui5 elements already, but when it comes to <ui5-side-navigation> i can't figure out how to set up onclick event properly for sub items of this element. I would like to be able to open dialog/popover e.g.(<ui5-responsive-popover>) by clicking on some <ui5-side-navigation-sub-item> of the <ui5-side-navigation-item>. The only way i was able to achieve this is in Case 3 described below, but the problem is that it only works if ui5-side-navigation-item is not collapsed.

Imports:

import "@ui5/webcomponents-fiori/dist/ShellBar.js";
import "@ui5/webcomponents-fiori/dist/ShellBarItem.js";

import "@ui5/webcomponents-fiori/dist/SideNavigation.js";
import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";

Case 1 Not working as expected:

<ui5-side-navigation>
    <ui5-side-navigation-item text=home icon="home">
        <ui5-side-navigation-sub-item  text="Link1" **onclick="myFunction()"**></ui5-side-navigation-sub-item>
        <ui5-side-navigation-sub-item text="Link2"></ui5-side-navigation-sub-item>
    </ui5-side-navigation-item>
    <ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link"></ui5-side-navigation-item>
    <ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
</ui5-side-navigation>

<script>
function myFunction() {     
  console.log("TEST");
}
</script>

Case 2 Not working as expected:

<ui5-side-navigation>
    <ui5-side-navigation-item text=home icon="home">
        <ui5-side-navigation-sub-item  text="Link1"></ui5-side-navigation-sub-item>
        <ui5-side-navigation-sub-item text="Link2"></ui5-side-navigation-sub-item>
    </ui5-side-navigation-item>
    <ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link"></ui5-side-navigation-item>
    <ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
</ui5-side-navigation>

<script>
               const tmp= document.querySelector("ui5-side-navigation")
            .querySelector("ui5-side-navigation-item")
            .querySelector("ui5-side-navigation-sub-item");

        tmp.addEventListener("click", () => {
            console.log("TEST");
        });
</script>

Case 3 works as expected

<ui5-side-navigation>
    <ui5-side-navigation-item text=home icon="home">
        <ui5-side-navigation-sub-item  text="Link1"></ui5-side-navigation-sub-item>
        <ui5-side-navigation-sub-item text="Link2"></ui5-side-navigation-sub-item>
    </ui5-side-navigation-item>
    <ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link"></ui5-side-navigation-item>
    <ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
</ui5-side-navigation>

<script>
             var sideNavigation = document.querySelector("ui5-side-navigation");
            var opener = sideNavigation.shadowRoot
            .querySelector("div")
            .querySelector("ui5-tree")
            .shadowRoot.querySelector("ui5-list")
            .querySelectorAll("ui5-li-tree")[0]
            .shadowRoot.querySelector("li");

            opener.addEventListener("click", function(event) {
                console.log("TEST");
                //popover.open(opener);
            });
</script>

Case 3 works... but this is not a good option either, because its impossible to bind event for <ui5-side-navigation-sub-item> ofui5-side-navigation-item if it is collapsed.

For this examples i was using just Html, JS and ui5-webcomponents with Parcel server without Blazor to keep it simple.

Not sure if this is a bug or me misunderstanding documentation or doing some mistake... In any case can anyone please help me out here ?

[fifoosid]

Hello @yolttt

The best approach to reacting to a item/subitem click is by adding a handler for the ui5-selection-change event of the ui5-side-navigation. In the event object, we are providing a reference to the clicked item, so that you can do whatever you wish(open popover, navigate, etc...).

For example:

document.querySelector("ui5-side-navigation").addEventListener("ui5-selection-change", event => {
    console.log(event.detail.item);
})