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 https://github.com/microsoft/fluentui/issues/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.

[MarvinKlein1508]

As a workaround I'm using InputNumber with fluent-ui CSS.

.fluent-control {
    appearance: none;
    color: inherit;
    background: transparent;
    border: 0px;
    height: calc(100% - 4px);
    margin-top: auto;
    margin-bottom: auto;
    padding: 0 calc(var(--design-unit) * 2px + 1px);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    width: 100%;
    outline: none;
    box-sizing: border-box;
    position: relative;
    color: inherit;
    border: calc(var(--stroke-width) * 1px) solid transparent;
    border-radius: calc(var(--control-corner-radius) * 1px);
    height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: padding-box linear-gradient(var(--neutral-fill-input-rest),var(--neutral-fill-input-rest)),border-box var(--neutral-stroke-input-rest);
}

And then

<label for="pos-quantity" class="fluent-input-label" style="margin-bottom: calc(var(--design-unit) * 1px);">Quantity</label>
<InputNumber @bind-Value="pos.Quantity" class="fluent-control" id="pos-quantity" />
<FluentValidationMessage For="() => pos.Quantity" />

works fine for me. The only downside is that the numeric arrow controls looks a bit different.

[vnbaaij]

@MarvinKlein1508 that is a solid alternative.

With the re-focusing of the FAST project (see https://github.com/microsoft/fast/issues/6955), I'm not seeing this getting fixed in the current v2 Fluent UI web components script (which uses FAST foundation).

Not sure yet how to move forward with this particular component...

[coderdnewbie]

@MarvinKlein1508, @vnbaaij

Here is an alternative variation that means the input control will only succeed if a valid 2 decimal place number has been entered (This is the common case for me). It may make your controls better as well.

<label for="movie-price" class="fluent-input-label" style="margin-bottom: calc(var(--design-unit) * 1px);">Quantity</label>
<input type="decimal" name="movie-price" @bind="Movie.Price" id="movie-price" class="fluent-control" step="0.01" pattern="^\d*(\.\d{0,2})?$" title="Enter valid two decimal place number" />
<FluentValidationMessage For="() => Movie.Price" />

Thanks for your solution in https://github.com/microsoft/fluentui-blazor/issues/1345#issuecomment-2145145944