FluentNumberField not working in WASM

[chigivigi]

🐛 Bug Report

I have a wasm project where I am testing fast-blazor components. The page breaks when containing FluentNumberField component.

💻 Repro or Code Sample

I have copied the code from the data grid example

<h2>Grid with RowItemTemplate</h2>
<Microsoft.Fast.Components.FluentUI.FluentDataGrid id="defaultGrid3" RowsData=RowsGrid1 ColumnDefinitions=ColumnsGrid1 GridTemplateColumns="1fr 1fr">
    <RowItemTemplate>
        <Microsoft.Fast.Components.FluentUI.FluentDataGridRow TItem=SampleGrid1Data>
            <Microsoft.Fast.Components.FluentUI.FluentDataGridCell GridColumn=1>
                <Microsoft.Fast.Components.FluentUI.FluentTextField @bind-Value=@context.Name></Microsoft.Fast.Components.FluentUI.FluentTextField>
            </Microsoft.Fast.Components.FluentUI.FluentDataGridCell>
             <Microsoft.Fast.Components.FluentUI.FluentDataGridCell GridColumn=2>
                <Microsoft.Fast.Components.FluentUI.FluentNumberField @bind-Value=@context.Age></Microsoft.Fast.Components.FluentUI.FluentNumberField>
            </Microsoft.Fast.Components.FluentUI.FluentDataGridCell>           

        </Microsoft.Fast.Components.FluentUI.FluentDataGridRow>
    </RowItemTemplate>
</Microsoft.Fast.Components.FluentUI.FluentDataGrid>

🤔 Expected Behavior

I should be able to display the value and change it.

😯 Current Behavior

The column is not showing,
It breaks with the error message: crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: no idea on how to unbox value types
Error: no idea on how to unbox value types

💁 Possible Solution

I do not have a suggestion how to fix it.

🔦 Context

We are testing this nuget package with the intention to change our frontend application to use it.

🌍 Your Environment

I am working on Windows 10 PC.
The browser I am using is Microsoft Edge Version 94.0.992.38.
The nuget package version I am using is 0.4.0.
The project is net5.0 blazor Wasm.

[dominicusmento]

It happens to me also, without the grid in client only blazor:
<FluentNumberField @bind-Value=@testNumber></FluentNumberField>

[vnbaaij]

I think this has to do with an issue in the underlying fast repo microsoft/fast#5246

ps. good to see you here guys!

[EisenbergEffect]

Looks like we've got a fix under review for this in the main repo: microsoft/fast#5289

[EisenbergEffect]

Closing this issue out now that the core component fix is in.

[chigivigi]

@EisenbergEffect I cannot update Microsoft.Fast.Components.FluentUI nuget package, the last version is still 0.4.0

Could you provide a prerelease package if a new version is still not possible ?

[EisenbergEffect]

This fix is dependent on the script rather than the Nuget package. What version of the script are you using?

[chigivigi]

@EisenbergEffect I am working in a new Blazor WebAssembly project, there are no scripts. I am using the nugget package Microsoft.Fast.Components.FluentUI and nothing else in the project.

[vnbaaij]

@chigivigi If you follow the getting started in the readme (https://github.com/microsoft/fast-blazor#getting-started) for the project, you should have added a <script type="module" src="https://unpkg.com/@fluentui/web-components"></script> to your index.html or layout. That is the script @EisenbergEffect is refering to.
This script recently got updated to version 2.0 (which contains the visual refresh and the first set of fixes for the underlying <fluent-number-field>). There will be another update soon to fix the remaining number field issue (microsoft/fast#5315)

[chigivigi]

@vnbaaij I put the script inside the index.html file and after starting it again I get the following error message:

The page breaks and the second column that should display the number field componente is empty:

[vnbaaij]

Ok, that is not good...I have a Web Assembly demo running in my fork (https://github.com/vnbaaij/fast-blazor/tree/new-demo) where this is working. You can see a working demo at https://thankful-island-0494bc003.azurestaticapps.net/DatagridPage.
I think it will be fixed once we release a new version of the package. If you need a working situation right now, your only option is to include the Microsoft.Fast.Components.FluentUI project in your solution. Beware though that as of now we are targeting .NET 6 (rc2).

[chigivigi]

Alright, I will wait for the nugget package.