Javascript error, when first child-Tag of an item is a Blazor component

[SebastianWachsmuth]

Describe the bug ContextMenu Items with blazor component as child cause error: blazorContextMenu.min.js:1

       Uncaught TypeError: r.className.split is not a function
    at e (blazorContextMenu.min.js:1:2608)
    at Object.f.OnMenuItemMouseOver (blazorContextMenu.min.js:1:2721)
    at HTMLLIElement.onmouseover (Elemente:1:19)

Causing Line: blazorContextMenu.js

To Reproduce Steps to reproduce the behavior:

Create a contextMenu with a blazor component as first child

<BlazorContextMenu.ContextMenu Id="contextMenuId">
    <BlazorContextMenu.Item OnClick="ShowDetailsClicked">
        <FeatherEye CssClass="mr-4 inline-block" Color="currentColor" />
          Details
    </BlazorContextMenu.Item>
</BlazorContextMenu.ContextMenu I

this will generate follow markup for the Item

<li id="4f859ec6-da68-487d-ac20-1c0799695a25" 
     class="blazor-context-menu__item blazor-context-menu__item--default " 
     style="display:block;" 
     itemenabled="true" 
     onmouseover="blazorContextMenu.OnMenuItemMouseOver(event, 4, this);" 
     onmouseout="blazorContextMenu.OnMenuItemMouseOut(event);" _bl_73="">
     <!--!-->
     <!--!-->
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1,5" stroke-linecap="round" stroke-linejoin="round" class="feather mr-4 inline-block feather-eye"><!--!--><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
     <!--!-->
      Details 
</li>

Expected behavior since the code is looking at the className property, the NodeList children can be used, since it only returns children of type element

Desktop (please complete the following information):

• OS: Windows 11
• Browser Edge
• Dotnet-Version: 6.0.3

Additional context The code uses the property childNodes, which also return text and comment Nodes (source)

[stavroskasidis]

Wow, thak you for this find and the PR. I will merge it and publish.

[SebastianWachsmuth]

i just found out, that it will also throw, if the first element is an svg, since class will be of type SVGAnimatedString which doesnt have a split method

could maybe be fixed by using element.classList