fix: Overflow Items not shown in Tabs Component

[flogruber]

🐛 Bug Report

If the tabs component is used in a smaller div and hosted as WASM, then the overlow items and the button for the overflow items are not displayed.
If the page is debugged with visual studio, the error does not occur.

💻 Repro or Code Sample

<div style="max-width:200px;">
    <FluentTabs>
        <FluentTab Label="Tab 1">
            <p>Tab 1 content</p>
        </FluentTab>
        <FluentTab Label="Tab 2">
            <p>Tab 2 content</p>
        </FluentTab>
        <FluentTab Label="Tab 3">
            <p>Tab 3 content</p>
        </FluentTab>
        <FluentTab Label="Tab 4">
            <p>Tab 4 content</p>
        </FluentTab>
        <FluentTab Label="Tab 5">
            <p>Tab 5 content</p>
        </FluentTab>
        <FluentTab Label="Tab 6">
            <p>Tab 6 content</p>
        </FluentTab>
    </FluentTabs>
</div>

I have also provided a demo page and a demo repo.
Repo: https://github.com/flogruber/ui-playground
Page: https://ui-playground.bitscode.dev/

🤔 Expected Behavior

Expected behavior and also the behavior during debugging

😯 Current Behavior

Behavior, when it is hosted

Error message:

Uncaught (in promise) Error: System.NotSupportedException: DeserializeNoConstructor, JsonConstructorAttribute, Microsoft.FluentUI.AspNetCore.Components.OverflowItem Path: $[0] | LineNumber: 0 | BytePositionInLine: 2.
 ---> System.NotSupportedException: DeserializeNoConstructor, JsonConstructorAttribute, Microsoft.FluentUI.AspNetCore.Components.OverflowItem
   Exception_EndOfInnerExceptionStack
   at System.Text.Json.ThrowHelper.ThrowNotSupportedException(ReadStack& , Utf8JsonReader& , Exception )
   at System.Text.Json.ThrowHelper.ThrowNotSupportedException_DeserializeNoConstructor(JsonTypeInfo , Utf8JsonReader& , ReadStack& )
   at System.Text.Json.Serialization.Converters.ObjectDefaultConverter`1[[Microsoft.FluentUI.AspNetCore.Components.OverflowItem, Microsoft.FluentUI.AspNetCore.Components, Version=4.11.7.25078, Culture=neutral, PublicKeyToken=null]].OnTryRead(Utf8JsonReader& , Type , JsonSerializerOptions , ReadStack& , OverflowItem& )
   at System.Text.Json.Serialization.JsonConverter`1[[Microsoft.FluentUI.AspNetCore.Components.OverflowItem, Microsoft.FluentUI.AspNetCore.Components, Version=4.11.7.25078, Culture=neutral, PublicKeyToken=null]].TryRead(Utf8JsonReader& , Type , JsonSerializerOptions , ReadStack& , OverflowItem& , Boolean& )
   at System.Text.Json.Serialization.JsonCollectionConverter`2[[Microsoft.FluentUI.AspNetCore.Components.OverflowItem[], Microsoft.FluentUI.AspNetCore.Components, Version=4.11.7.25078, Culture=neutral, PublicKeyToken=null],[Microsoft.FluentUI.AspNetCore.Components.OverflowItem, Microsoft.FluentUI.AspNetCore.Components, Version=4.11.7.25078, Culture=neutral, PublicKeyToken=null]].OnTryRead(Utf8JsonReader& , Type , JsonSerializerOptions , ReadStack& , OverflowItem[]& )
   at System.Text.Json.Serialization.JsonConverter`1[[Microsoft.FluentUI.AspNetCore.Components.OverflowItem[], Microsoft.FluentUI.AspNetCore.Components, Version=4.11.7.25078, Culture=neutral, PublicKeyToken=null]].TryRead(Utf8JsonReader& , Type , JsonSerializerOptions , ReadStack& , OverflowItem[]& , Boolean& )
   at System.Text.Json.Serialization.JsonConverter`1[[Microsoft.FluentUI.AspNetCore.Components.OverflowItem[], Microsoft.FluentUI.AspNetCore.Components, Version=4.11.7.25078, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& , OverflowItem[]& , JsonSerializerOptions , ReadStack& )
   at System.Text.Json.Serialization.Metadata.JsonTypeInfo`1[[Microsoft.FluentUI.AspNetCore.Components.OverflowItem[], Microsoft.FluentUI.AspNetCore.Components, Version=4.11.7.25078, Culture=neutral, PublicKeyToken=null]].Deserialize(Utf8JsonReader& , ReadStack& )
   at System.Text.Json.JsonSerializer.ReadFromSpan[OverflowItem[]](ReadOnlySpan`1 , JsonTypeInfo`1 , Nullable`1 )
   at System.Text.Json.JsonSerializer.ReadFromSpan[OverflowItem[]](ReadOnlySpan`1 , JsonTypeInfo`1 )
   at System.Text.Json.JsonSerializer.Deserialize[OverflowItem[]](String , JsonSerializerOptions )
   at Microsoft.FluentUI.AspNetCore.Components.FluentTabs.OverflowRaisedAsync(String value)
    at v.endInvokeDotNetFromJS (blazor.webassembly.js:1:3158)
    at Object.Qt [as endInvokeDotNetFromJS] (blazor.webassembly.js:1:56145)
    at dotnet.runtime.qrl1fuqt3c.js:3:33879
    at Fc (dotnet.runtime.qrl1fuqt3c.js:3:172155)
    at dotnet.native.9msu8ucn2h.wasm:0x1f0dc
    at dotnet.native.9msu8ucn2h.wasm:0x1c7c6
    at dotnet.native.9msu8ucn2h.wasm:0xea13
    at dotnet.native.9msu8ucn2h.wasm:0x1eb9c
    at dotnet.native.9msu8ucn2h.wasm:0x1fd03
    at dotnet.native.9msu8ucn2h.wasm:0xc794

🌍 Your Environment

• OS & Device: ALL
• Browser ALL
• .NET and Fluent UI Blazor library Version: .net9.0, Fluent UI Blazor: 4.11.7

[vnbaaij]

Should be solved with #3578. See #3576 for more info

[flogruber]

The issue is still present after upgrading to 4.11.8.
The provided test-site is available with the latest version.

[vnbaaij]

I was able to reproduce it with your repo. More importantly, I was able to solve it as well:

It will be in the next release.

[tomazws]

I am encountering this same issue and i'm on version 4.13.2