fix: Number Field within an editform using validation will permanently break if a number outside the bounds of the type is entered

[pingu2k4]

🐛 Bug Report

Create an edit form with data validation, and insert a FluentNumberField.
When you enter a number large than the maximum allowed (or presumably lower than the minimum allowed), you get a validation error "The {property} field must be a number.". When you then enter a more sensible value, the validation error remains and the form remains unsubmittable and the form will not work until it is recreated.

💻 Repro or Code Sample

<EditForm EditContext="EditContext">
    <DataAnnotationsValidator />

    <FluentNumberField @bind-Value="MyModel.MyInt" Label="My Int" Immediate="true" />
    <FluentValidationMessage For="() => MyModel.MyInt" />
</EditForm>

@code {
    Model MyModel { get; set; } = new();
    EditContext EditContext { get; set; } = default!;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        EditContext = new(MyModel);
    }

    public class Model
    {
        public int MyInt { get; set; }
    }
}

• Enter "1" in the box
• Repeatedly enter "0" after the current value in the box until the error appears
• Remove 0's and notice that the box never validated correctly and the form is now unusable

🤔 Expected Behavior

Error message should represent the actual issue, not state that it is not a number.
Then, when number is corrected, the field and form should operate correctly once again.

😯 Current Behavior

💁 Possible Solution

🔦 Context

This makes using NumberFields and form validation difficult to justify.

🌍 Your Environment

• OS & Device: Windows
• Browser Chrome (Latest)
• .NET 8, FluentUI 4.3.1

[ratanbiswas]

The same behaviour is observed when you try to submit the form with empty value in the FluentNumberField.

[neoix]

FYI @vnbaaij this is happening also in FluentUI Blazor website: https://www.fluentui-blazor.net/Forms

However, using InputNumber works perfectly fine.

[vnbaaij]

This is an issue in the underlying web components script. We are blocked on fixiing this until it is fixed there.

[martinbu]

Can you estimate how long it will take for this issue to be fixed in the fast component? I am aksing that, because with this issue the FluentValidationMessage is quite unusable for InputFields. In this repo, issues are fixed very fast. Thank you for that! But I can imagine, that issues in the underlying libs can take quite long to be fixed? Correct me if my assumption is wrong - maybe the answer is "it depends" :-) But I refer here to #871 which is blocked by microsoft/fluentui#29738

Therefore, I have to decide if I should wait for a fix or find a workaround for the whole validation stuff...

Is there a microsoft/fast or microsoft/fluentui issue that tracks this problem?

[vnbaaij]

I have no idea how long it will take. In general though, time it take to get things changed upstream tends to be rather long.
I think it would be safer to go an alternative route.

[vaibhavbrid]

We are running into the exact same issue with our web page having fluent number fields. A fix sooner will be great. What other alternate routes are out there? We could use the input type. Is there a quick css class reference(that you have used before) to give it a look and feel of a fluent number field component?

[vnbaaij]

The alternative I would recommend is a FluentTextField with an inputmode:

<FluentTextField @bind-Value=value5 TextFieldType="TextFieldType.Text" InputMode="InputMode.Numeric">Text with InputMode</FluentTextField> 

See also https://fluentui-blazor.net/TextField

[vaibhavbrid]

The alternative I would recommend is a FluentTextField with an inputmode:

<FluentTextField @bind-Value=value5 TextFieldType="TextFieldType.Text" InputMode="InputMode.Numeric">Text with InputMode</FluentTextField> 

See also https://fluentui-blazor.net/TextField

Thank you for the suggestion.