Issue With FluentNumberField

[grumpykiwi]

I have an issue with the FluentNumberField when using the arrow keys to step a number to an allowed value. On submit, the form insists the number is invalid and gives me the error message "Please enter a valid value"

<FluentNumberField @bind-Value="@EditTimeModel.TimeValue"
                        Label="Time (% of Hour)"
                        Required="true" 
                        Style="width: 81%;"
                        Max="24.0"
                        Min="0.25"
                        Step="0.25"
                        HideStep="false">
<FluentIcon Icon="Icons.Regular.Size20.TimePicker" Color="Color.Accent" Slot="end" />
</FluentNumberField>

If I submit a value of 8.5 it fails. If I step to a whole number it works.

[vnbaaij]

Hi,

Please see https://github.com/microsoft/fluentui-blazor/issues/209 and try the suggestions mentioned there

[grumpykiwi]

Hi

I discovered that article earlier and tried the suggested fixes.

Adding name to component - failed Setting Step="any" - failed

Back in July, user LuohuaRain mentioned this:

"One of the issues I encountered while working with FluentNumberField is that it does not integrate well with EditForm. A possible solution is to use instead, works fine with EditForm and decimal value."

He doesn't mention what he used as a possible solution.

Open to ideas. This is pretty critical to my timesheet application unfortunately as the field involved is to enter time spent on a client billable project. Billing clients is our bread and butter.

Thanks

Mark

[vnbaaij]

Mark,

I will take another look at this later.

Also, I would strongly recommend you to not use a number input for anything other than a simple up/down integer input. Browsers are notoriously bad in supporting this type of input. It's not just me saying that. See also https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ and lots of other references.

[grumpykiwi]

Very interesting article. I will use the recommended approach. It would have been nice to use the min/max/step stuff but I will might look at doing that with JS or something. Or maybe go read the Chris Sainty article about rolling my own component.

Thanks for the feedback.

[grumpykiwi]

Is it possible to use inputmode and pattern with a FluentTextField? Trying to avoid hacking away at the CSS of an tag to try and make it look the same as the fluent controls on the page

[vnbaaij]

Pattern is being supported and set on the input element created by the web component. Unfortunately the inputmode is not set