fix: NumberFields do not support doubles, decimals, floats

[pingu2k4]

🐛 Bug Report

When inserting a value into a numberfield where the bound value is a double, float or decimal, will not allow the user to enter a value with a decimal. It will instead ask you to enter one the the 2 nearest integers.

💻 Repro or Code Sample

<EditForm EditContext="EditContext">
    <DataAnnotationsValidator />
    <FluentNumberField @bind-Value="ExampleModel.Test" Label="Test" />
    <FluentButton Type="ButtonType.Submit">
        Submit
    </FluentButton>
</EditForm>

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

    protected override void OnInitialized()
    {
        base.OnInitialized();
        EditContext = new EditContext(ExampleModel);
    }

    public class Model
    {
        public double Test { get; set; }
    }
}

🤔 Expected Behavior

Allows user to submit the form with a value with decimals

😯 Current Behavior

When submitting the form, we get this preventing form submission.

💁 Possible Solution

🔦 Context

I have produced a minimal repro (above) in the base template after having found the issue in my main project in order to isolate it.

🌍 Your Environment

Windows, Chrome, .net 8, 4.2.1 FluentUI

[vnbaaij]

Hi,

Closing this as it is a duplicate. Please see #1127 (comment)

[pingu2k4]

@vnbaaij Just to clarify then, we cannot use the NumberField for decimal values whatsoever? I tried setting the step to 0.01 for example and still get the issue (though this would have still been suboptimal, as stepping using the spinner would have been preferable by a different value). All the same though, I am unable in any way, to have the number say "1.2" represented in a NumberField component?

[vnbaaij]

I'll take another look at what is happening when it is used in a Form.

But please look at the article I linked to in the other issue. The NumberField is most of the times not a good solution.

[martinbu]

Hi @vnbaaij,
I hope you read comments on already closed issues and it is ok to discuss this issue further here.

I also have troubles with the number field and now read your comments, the linked issue and the link provided there.
For my application I need a number field with validation (e.g. min/max value) and culture awareness. You now suggest to not use the number field, instead as stated in the provided link a text field with inputmode=numeric should be used. I could now use the FluentTextField and try to set the inputmode with the AddtionalAttributes – maybe the FluentTextField should provide an explicit parameter for that.
But in the end, I think I will make no sense to add all those things (min/max value, culture awareness) to the FluentTextField as it is a text field and no number field. Therefore, I see 3 solutions:

1. Create my own component which handles all those things with support for min/max, culture awareness and custom validation
2. Change/improve the FluentNumberField to behave like a correct number field and not using <input type="number"> but <input type="text" inputmode="number"> with support for min/max, culture awareness and custom validation, number formatting (scientific, …), integers or floating point, ...
3. Add an additional fluent component to the library with all the features from 2.

From my perspective,

1. Feels strange. Because I am using a component library which should take care of such "every-day" problems.
2. Would be the correct thing to do, because everyone using a component library and sees a component NumberField expect such features.
3. Would also be ok, because the FluentNumberField is a "mapping" to the html input number field with all its known "issues". But we have a general component that works as expected.

What do you think about that?

[vnbaaij]

Yes, we get notified on responses on closed issues (and read them!).

I'll take some time to think about how we can best approach this problem during the coming (hopefuly quieter) weeks.
First respone on your points:

1. Agreed, this should be something offered by us.
2. Not entirely sure this is possible. Need to investigate
3. Is an option but I prefer to have/use something already available and not develop everything ourselves (we don't have the capacity for that). Perhaps we can re-use more of the standard InputNumber component

[thebarrettlo]

I'm having the same issue with a FluentNumberField with TValue=double in an EditForm--validation of the number field fails when the value is not an integer.

Trying to piece together the issues/discussions already open regarding this behavior (#733, this one #1175, and microsoft/fast#6617)... so this validation bug is coming from the @microsoft/fast-element library that these components wrap? If so, seems like an issue to push harder in the FAST project, since it's an essential behavior that is affecting projects consuming it.

Is there an alternative component/workaround that can be used in an EditForm?

[vnbaaij]

@thebarrettlo I'm in contact with the FAST team again to see what we can do.

[Skintkingle]

Have you got anywhere with this after contacting the FAST team?

[vnbaaij]

No, is still open

[Skintkingle]

Is there an issue you can share on the FAST Issue board that's in relation to this?

[vnbaaij]

Overarching issue is this one: microsoft/fast#6881

[Mike-E-angelo]

Running into this issue, too 💥

[kamazheng]

No, is still open

Any progress?

[vnbaaij]

No. And there won't be any till things change in the web component.