Setting id from sub menu item throwing error in browser console on selecting item

[Admir Hodžic]

With version 17.4.44 looks like there is BUG in menu.

In earlier versions of  Blazor components this worked for me

<EjsMenu CssClass="dock-menu" Orientation="@Verorientation" Items="@MainMenuItems">

                                <MenuEvents   ItemSelected="MenuSelect"></MenuEvents>

                            </EjsMenu>

@code {

    public Orientation Orientation = Orientation.Horizontal;

    public Orientation Verorientation = Orientation.Vertical;

public List<MenuItem> MainMenuItems = new List<MenuItem>{

        new MenuItem {

            Text = "Meni izbornik (Klikni da se sakrije)", IconCss = "fas fa-bars", Id="0" 

        },

        new MenuItem {

            Text = "Početna straica", IconCss = "fas fa-home", Id="1"

        },

        new MenuItem  {

            Text="Test", IconCss="icon-comment-inv-alt2 icon" ,Items =new List<MenuItem>(){

                 new MenuItem { Text="Counter sample", IconCss="icon-comment-inv-alt2 icon" , Id="2" },

                 new MenuItem { Text="Fetc sample", IconCss="icon-comment-inv-alt2 icon" , Id="3" },

            }

        },

};

  private void MenuSelect(Syncfusion.EJ2.Blazor.Navigations.MenuEventArgs args)

    {

        var menuId = args.Item.Id;

        if (menuId == "0")

            this.sidebar.Toggle();

        if (menuId == "1")

            NavigationManager.NavigateTo("/");

         if (menuId == "2")

            NavigationManager.NavigateTo("/fetchdata");

         if (menuId == "3")

            NavigationManager.NavigateTo("/counter");

}

Clicking on sub menu item which has property Id  throws error in browser console

constants.js:93 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '#2' is not a valid selector.

    at e.<anonymous> (https://cdn.syncfusion.com/ej2/17.4.44/dist/ej2.min.js:10:2504448)

    at e.notify (https://cdn.syncfusion.com/ej2/17.4.44/dist/ej2.min.js:10:483325)

    at t.e.trigger (https://cdn.syncfusion.com/ej2/17.4.44/dist/ej2.min.js:10:502097)

    at t.closeMenu (https://cdn.syncfusion.com/ej2/17.4.44/dist/ej2.min.js:10:2503781)

    at t.clickHandler (https://cdn.syncfusion.com/ej2/17.4.44/dist/ej2.min.js:10:2520161)

constants.js:93 Uncaught DOMException: Failed to execute 'querySelector' on 'Element': '#2' is not a valid selector.

    at e.<anonymous> (https://cdn.syncfusion.com/ej2/17.4.44/dist/ej2.min.js:10:2504448)

    at e.notify (https://cdn.syncfusion.com/ej2/17.4.44/dist/ej2.min.js:10:483325)

    at t.e.trigger (https://cdn.syncfusion.com/ej2/17.4.44/dist/ej2.min.js:10:502097)

    at t.closeMenu (https://cdn.syncfusion.com/ej2/17.4.44/dist/ej2.min.js:10:2503781)

    at t.clickHandler (https://cdn.syncfusion.com/ej2/17.4.44/dist/ej2.min.js:10:2520161)

(anonymous) @ constants.js:93

e.notify @ constants.js:93

e.trigger @ constants.js:93

t.closeMenu @ constants.js:93

t.clickHandler @ constants.js:93

[Arunkumar Devendiran]

Hi Admir, 

 

Sorry for the inconvenience caused. 

 

We have checked your reported issue and we are able to reproduce it in our end. We have logged this as a defect “Setting id as number on sub menu item throwing error” in our end. We will include the fix for this issue in our upcoming patch release (Feb 5, 2020) and appreciate your patience until then. Please follow the below feedback link, 

  

Feedback Link: 

https://www.syncfusion.com/feedback/11649/setting-id-as-number-on-sub-menu-item-throwing-error  

 

Regards, 

Arunkumar D