Wrong delegate call when using Item Click handler.

[Brice FROMENTIN]

Hello,

With the version 17.1.0.53-beta and the following source :

@inherits LayoutComponentBase
@using Syncfusion.EJ2.RazorComponents.Navigations
@inject ApplicationState Application
@inject UserState User
@inject IUriHelper UriHelper

<EjsSidebar ID="sidebar" @Ref=@sidebar Type="SidebarType.Over" CloseOnDocumentClick="true">
    <ChildContent>
        <SideBarLayout sidebar="@sidebar" />
    </ChildContent>
</EjsSidebar>

<EjsToolbar OverflowMode="OverflowMode.Popup">
    <ToolbarItems>
        <ToolbarItem Type="ItemType.Button" Template=@("<img src='images/burger-menu.svg' class='toolbar-image' />") Align="ItemAlign.Left" Click="@OnSidebarClicked" />
        <ToolbarItem Type="ItemType.Button" Template=@("<img src='images/home.svg' class='toolbar-image' />") Align="ItemAlign.Left" Click="@OnHomeClicked" />
        <ToolbarItem Type="ItemType.Separator" Align="ItemAlign.Left" />
        <ToolbarItem Type="ItemType.Button" Text="@Application.GetPageTitle(UriHelper)" Align="ItemAlign.Left" CssClass="toolbar-static" />
        <ToolbarItem Type="ItemType.Button" Text="Préparation" Align="ItemAlign.Right" CssClass="toolbar-static" />
        <ToolbarItem Type="ItemType.Separator" Align="ItemAlign.Right" />
        <ToolbarItem Type="ItemType.Button" Text="Execution" Align="ItemAlign.Right" CssClass="toolbar-static" />
        <ToolbarItem Type="ItemType.Separator" Align="ItemAlign.Right" />
        <ToolbarItem Type="ItemType.Button" Template=@("<img src='images/user-password.svg' class='toolbar-image' />") Align="ItemAlign.Right" CssClass="toolbar-static" />
        <ToolbarItem Type="ItemType.Button" Text="@(Model.FirstName + " " + Model.MiddleName + " " + Model.LastName)" Align="ItemAlign.Right" CssClass="toolbar-static" />
        <ToolbarItem Type="ItemType.Separator" Align="ItemAlign.Right" />
        <ToolbarItem Type="ItemType.Button" Template=@("<img src='images/logout.svg' class='toolbar-image' />") Align="ItemAlign.Right" Click="@OnLogoutClicked" />
    </ToolbarItems>
</EjsToolbar>

@functions
{
    // Model
    UserModel Model = new UserModel();
    string sidebarImage = "<img src='images/burger-menu.svg' />";

    // References
    EjsSidebar sidebar;

    protected override async Task OnInitAsync()
    {
        if (User.Model == null || User.Model.Id == Guid.Empty)
        {
            this.Model = await User.GetInfos();
            StateHasChanged();
        }
        else
        {
            Model = User.Model;
        }
    }

    public void OnSidebarClicked(ClickEventArgs args)
    {
        sidebar.Show();
    }

    public void OnHomeClicked(ClickEventArgs args)
    {
        UriHelper.NavigateTo("/");
    }

    public void OnLogoutClicked(ClickEventArgs args)
    {
        User.Logout(UriHelper);
    }
}

When I click on the first item with a Click handler, the right delegate (OnSidebarClicked) is called.

When I click on the second item with a Click handler, the wrong delegate (OnLogoutClicked) is called.

When I click on the third item with a Click handler, there is no delegate called.

Regards.

[Hareesh Balasubramanian]

Hi Brice, 

Greetings from Syncfusion support. 

We could reproduce the reported issue and logged the below bug report. Fix will be included in our upcoming Volume 2, 2019 main release which is expected to be rolled out by June end, 2019. 

https://www.syncfusion.com/feedback/7072/issue-in-triggering-the-complex-property-event-binding 

Regards, 

Hareesh B