Cannot read properties of undefined (reading 'parentNode') with recursive FluentTreeView

[verdie-g]

🐛 Bug Report

When generating a FluentTreeView using a recursive function, only the first item is rendered and it throws Cannot read properties of undefined (reading 'parentNode') on click.

💻 Repro or Code Sample

<FluentTreeView>
@{
    RenderTree(0, 3);

    void RenderTree(int depth, int maxDepth)
    {
        if (depth >= maxDepth)
        {
            return;
        }

        <FluentTreeItem Text="item">
            @{ RenderTree(depth + 1, maxDepth); }
        </FluentTreeItem>
    }
}
</FluentTreeView>

🤔 Expected Behavior

I expect a tree to be generate with 3 levels of items and that the click to expand works.

😯 Current Behavior

Only the first item is generated and it throws this on click

crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: TypeError: Cannot read properties of undefined (reading 'parentNode')
TypeError: Cannot read properties of undefined (reading 'parentNode')

🔦 Context

I have a tree data structure and I'm trying to display it using a FluentTreeView.

🌍 Your Environment

• OS & Device: Windows on PC
• Browser: Google Chrome
• .NET: 8.0.1
• Microsoft.FluentUI.AspNetCore.Components: 4.3.0

[vnbaaij]

Doing it like this, it works:

<FluentTreeView>
    @RenderTree(0, 3)
</FluentTreeView>

@code {
    public static RenderFragment RenderTree(int depth, int maxDepth)
    {
        return builder =>
        {
            if (depth >= maxDepth)
            {
                return;
            }

            builder.OpenComponent<FluentTreeItem>(0);
            builder.AddAttribute(1, "Text", "item");
            builder.AddAttribute(2, "ChildContent", RenderTree(depth + 1, maxDepth));
            builder.CloseComponent();
        };
    }
}

note: no errors in console

[verdie-g]

Thanks! Where was this error coming from though? Would you not consider that as a bug? Using C# code to build my template is way more verbose than using HTML.

[vnbaaij]

I think it is more a Blazor thing than a library thing and therefore not an issue

[verdie-g]

I've thought about that but I was not able to reproduce the problem using <div> instead of <FluentTreeItem>. Any idea how to prove it's not coming from fluent-ui?

[vnbaaij]

If it renders with arranging the methods in a different way, it can't be a component issue. What is rendered in the end is the same (web) component.