Blazorise: NumericEdit not working with @bind-Value

Created on 19 Nov 2019  路  4Comments  路  Source: stsrki/Blazorise

It seems impossible to edit a NumericEdit with decimal numbers. When trying to type 1.2 the value will be changed to 12.
This behavior occurs, when binding the value with "bind-Value". When binding with "Value" then one can edit the number with ".".

Also at the start, the value will be shown with comma instead of point as separator.
So it seems, that here the formatting of the number will be done by the culture of the browser/system and not by the setting "DecimalsSeparator" (in my case I have german as my system culture).

here is my example code:

<NumericEdit TValue="double" @bind-Value="@dummyNumber1" DecimalsSeparator="."/>
@code 
{
    double dummyNumber1 { get; set; }
protected override async Task OnInitializedAsync()
    {
        dummyNumber1 = 42.5;
    }
}
Bug 馃悶

All 4 comments

I just tried it and you're right it doesn't work. I will need to investigate more to see what's the actual problem. Thanks for reporting.

I managed to make it work. The problem is actually bigger than expected and it's not so much in Blazorise as it's in the browsers support. Specifically in the localization of input fields. https://www.ctrl.blog/entry/html5-input-number-localization.html

To make it work I had to add support for lang attribute. So when defining the NumericEdit it also have to be defined. If left undefined it will fallback to CultureInfo.InvariantCulture. It acts more as a hint for Blazorise so it can know how to format the entered value.

Example:

<NumericEdit TValue="double" lang="en-us" @bind-Value="@dummyNumber1" DecimalsSeparator="." />
@code
{
    double dummyNumber1 { get; set; }
    protected override Task OnInitializedAsync()
    {
        dummyNumber1 = 42.5;

        return base.OnInitializedAsync();
    }
}

today I updated Visual Studio, so that I now have netcore 3.1, which is necessary for blazories 0.8.7.1.
then I tried your example, but I still have the same issues with NumericEdit. (I use Chrome 78.0.3904.108). Has anybody any hints, what can be wrong?

The issue is fixed in 0.8.8 which is still in development. It's not yet ready to be available.

Also I will update Blazorise to 3.1 today.

Was this page helpful?
0 / 5 - 0 ratings