fix: Unexpected Behavior in FluentGrid

[jbam-cgy]

🐛 Bug Report

I'm getting unexpected results using FluentGrid:

1. Code executes differently when wrapped in a FluentGrid?
2. I'm getting two scroll bars in the default project when the content exceeds the available space.

💻 Repro or Code Sample

<!-- Part 1: Unexpected results 
     1. Shows Line 101 a hundred times
     2. On default project causes a second scroll bar to appear when run in isolation. If run
     in conjunction with Part 2 this goes away? 
-->
<FluentGrid>
    @for (int i = 1; i <= 100; i++)
    {              
        <FluentGridItem xs="12">Line @i</FluentGridItem>
    }
</FluentGrid>

<!-- Part 2: Gives expected results
     1. Shows Line 1 thru Line 100
     2. On default project doesn't causes a second scroll bar to appear when run in isolation.
-->
@* @for(int i = 1; i<= 100; i++)
{   
    <label>Line @i</label>
    <br/>
} *@

🤔 Expected Behavior

1. Code to run the same in FluentGrid as it does outside of FluentGrid.
2. No double scrollbars.

😯 Current Behavior

1. Value is showing the last value when rendered to the screen.
2. Two scrollbars are being created.

🔦 Context

Trying to dynamically add controls and getting undesirable results.

🌍 Your Environment

• Windows 10 Enterprise
• Chrome and Edge
• .Net 8.0, Microsoft.FluentUI.AspNetCore.Components 4.4.1

[vnbaaij]

This is all just standard Blazor behavior. Read up on using @key etc: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/element-component-model-relationships?view=aspnetcore-8.0

[jbam-cgy]

I'm still new to Blazor and Fluent UI but FYI in case this helps anyone.

For issue 1 @key was helpful to know but I couldn't get it to work with a for loop (not for each) and I'm not changing its contents. I did find a similar ticket [https://github.com/dotnet/aspnetcore/issues/16809] describing the same problem. If I change the code to use a foreach loop I can make it work with the following and not need @key or other variables/objects:

<FluentGrid>
    @foreach (int i in Enumerable.Range(1,100))
    {
        <FluentGridItem xs="12">
            <FluentLabel>Line @i</FluentLabel>
        </FluentGridItem>
    }
</FluentGrid>

I don't currently have a solution for issue 2 (double scroll bars).