SfMenu error with nested menu items inside SfToolbar

[Ryan Tomko]

There appears to be a bug in SfMenu in 28.1.36 when using a nested menu:

<div>

    <SfToolbar OverflowMode="OverflowMode.Scrollable">

        <ToolbarItems>

            <ToolbarItem>

                <Template>

                    <div>

                        <SfMenu TValue="MenuItem">

                            <MenuItems>

                                <MenuItem Text="Configuration">

                                    <MenuItems>

                                            <MenuItem Text="Admin">

                                                <MenuItems>

                                                    <MenuItem Text="Taxes" Url="/taxes"></MenuItem>

                                                </MenuItems>

                                            </MenuItem>

                                    </MenuItems>

                                </MenuItem>                              

                        </MenuItems>

                        </SfMenu>

                    </div>

                </Template>

            </ToolbarItem>

        </ToolbarItems>

    </SfToolbar>

</div>

Clicking on the Taxes item triggers and error:

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

   at System.Collections.Generic.List`1.get_Item(Int32 index)

   at Syncfusion.Blazor.Navigations.SfMenu`1.BeforeOpenCloseEvent(String eventName, Boolean isParent)

   at Syncfusion.Blazor.Navigations.SfMenu`1.BeforeCloseHandler[T](BeforeOpenCloseMenuEventArgs`1 e)

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Syncfusion.Blazor.Internal.SfBaseUtils.InvokeEvent[T](Object eventFn, T eventArgs)

   at Syncfusion.Blazor.Navigations.Internal.SfMenuBase`1.TriggerBeforeOpenCloseEvent[T](T parentItem, List`1 subItems, String name, Boolean isParent, Double left, Double top, String id)

   at Syncfusion.Blazor.Navigations.Internal.SfMenuBase`1.CloseMenuAsync(Int32 startIndex, Boolean isKey, Boolean refresh, Boolean hamburgerMode)

   at Syncfusion.Blazor.Navigations.Internal.SfMenuBase`1.ClickHandler[T](List`1 menuItems, T item, EventArgs e, Boolean isEnterKey, Boolean isUl, Boolean header, Boolean hamburgerMode)

   at Syncfusion.Blazor.Navigations.SfContextMenu`1.ItemClickHandler(TValue item, MouseEventArgs e, Boolean isEnterKey, Boolean isUl, Boolean header)

   at Syncfusion.Blazor.Navigations.SfContextMenu`1.<>c__DisplayClass79_2.<<BuildRenderTree>b__7>d.MoveNext()

--- End of stack trace from previous location ---

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit '0dqicVyeOb9usNxscUsZeDbfUe0z-DNPHbLIvA6kL_k'.

[YuvanShankar Arunagiri]

Hi Ryan,

We have validated your reported query with your provided code snippet and unable to reproduce your reported issue in our end. For your reference, refer to the attached sample file.

If you still facing the issue, kindly share the below details.

• Share the details how did you render the menu with toolbar sample within your project or modify our sample to replicate the issue.

• Share the video demonstration of issue for better understating.

Based on the above details, we will check and provide the better solution.

Regards,

YuvanShankar A

Attachment: BlazorApp1wasm_20895942.zip

[Ryan Tomko]

I created a new project and added a similar SfMenu but got a different error:

System.InvalidOperationException: TypeError: Cannot read properties of null (reading 'removeChild')

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)

Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit '10oecYYaFqSjvQK8NhbLeM8dKCnujkWfpKfBTzT0jhY'.

See attached sample project.  My set up is .NET 9, Syncfusion Blazor 28.1.36, Blazor Server

I can't get the same error as before in my test project:

System.ArgumentOutOfRangeException: Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

   at System.Collections.Generic.List`1.get_Item(Int32 index)

   at Syncfusion.Blazor.Navigations.SfMenu`1.BeforeOpenCloseEvent(String eventName, Boolean isParent)

   at Syncfusion.Blazor.Navigations.SfMenu`1.BeforeCloseHandler[T](BeforeOpenCloseMenuEventArgs`1 e)

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Syncfusion.Blazor.Internal.SfBaseUtils.InvokeEvent[T](Object eventFn, T eventArgs)

   at Syncfusion.Blazor.Navigations.Internal.SfMenuBase`1.TriggerBeforeOpenCloseEvent[T](T parentItem, List`1 subItems, String name, Boolean isParent, Double left, Double top, String id)

   at Syncfusion.Blazor.Navigations.Internal.SfMenuBase`1.CloseMenuAsync(Int32 startIndex, Boolean isKey, Boolean refresh, Boolean hamburgerMode)

   at Syncfusion.Blazor.Navigations.Internal.SfMenuBase`1.ClickHandler[T](List`1 menuItems, T item, EventArgs e, Boolean isEnterKey, Boolean isUl, Boolean header, Boolean hamburgerMode)

   at Syncfusion.Blazor.Navigations.SfContextMenu`1.ItemClickHandler(TValue item, MouseEventArgs e, Boolean isEnterKey, Boolean isUl, Boolean header

But in my production project I still get the above error

[Ryan Tomko]

zip file attached

Attachment: SyncfusionBlazorApp1_33616246.zip

[YuvanShankar Arunagiri]

Hi Ryan,

We have checked your reported query, and already we have logged the bug for your last update script error (TypeError: Cannot read properties of null (reading 'removeChild')) on our end. For reference, you can track the below feedback link.

Feedback link: https://www.syncfusion.com/feedback/49328/sfmenubar-throws-error-with-rendermode-interactiveauto

Additionally, if you can’t create the Blazor sample for replicating your production error (mentioned in your first update), please share the replication steps with a video demonstration and entire code snippet of menu component. Based on that, we will try to replicate it on our end.

Regards,

YuvanShankar A