NumberInput component

[SvenVoeten]

Hi,

I'm trying to implement the NumberInput component in my project but was unable to use decimal values. So I copied the example demo code but this also doesn't work.

In the example below I inputted 2.5 and pressed enter, then the value is changed to 25. Also if I use the increase value arrow it icreases with 1 to 26.

Any idea on what I'm doing wrong?

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="int?" @bind-Value="@amount" Step="10" Placeholder="Enter amount" />
    <span class="form-text">Info: Here <code>Step</code> parameter is set to <b>10</b>.</span>
</div>
<div class="mb-3">Entered Amount: @amount</div>
<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="decimal?" @bind-Value="@amount2" Step="2.5" Placeholder="Enter amount" />
    <span class="form-text">Info: Here <code>Step</code> parameter is set to <b>2.5</b>.</span>
</div>
<div class="mb-3">Entered Amount: @amount2</div>

@code {
    private int? amount;
    private decimal? amount2;
}

[gvreddy04]

@SvenVoeten Were you able to replicate here: https://demos.blazorbootstrap.com/form/number-input#step

I'm not able to replicate the Issue. Please see the attached video. Let me know, If I'm missing something.

https://github.com/vikramlearning/blazorbootstrap/assets/2337067/ecbe911e-a324-473f-b2c8-a7c8a2b35bf1

Also, provide the following details:

Web Assembly / Server: .NET Version: BlazorBootstrap Version:

[SvenVoeten]

@gvreddy04

Thanks for the fast response. I created an example project where you can see the issue. Just debug it as a windows app and jou should be able to reproduce the issue.

Web Assembly / Server: >NET MAUI Blazor App .NET Version: 7 BlazorBootstrap Version: 1.10.0

InputTest.zip

[gvreddy04]

@SvenVoeten I don't see any issue with your code, and it is working as expected. Please see the attached video for reference. Just do a clean and build again. You can also try uninstalling the app from the local Windows Store and running it again.

https://github.com/vikramlearning/blazorbootstrap/assets/2337067/89718c75-29fe-4aed-a92f-ee6684d3cddc

[MarvinKlein1508]

@SvenVoeten maybe this has something todo with localization. Which language is your Windows running?

[Capellio]

I think @MarvinKlein1508 is correct. I walk into the same problem with the CurrencyInput and the use of points and comma's which is used differently between language's. Diving into the code it looks like (in my language) the comma's is been ignored as an decimal seperator but later on translated into the locale format. This results in basically the same issue as @SvenVoeten has.

[gvreddy04]

@Capellio Can you help me reproduce this issue by providing some steps?

[Capellio]

@Capellio Can you help me reproduce this issue by providing some steps?

for example : <CurrencyInput TValue="decimal" @bind-Value="@ProductAgreement.Price" Locale="nl-NL" />

This should allow the value "€ 12,59" which is a valid format for EU countries. However, the "," (comma) is not allowed as a valid character. At least, that is how I understand the following code from the component (method "ExtractValue").

The "SetFormattedValueAsync" method ignores the seperation characters, therefore the value is transformed into "€ 1259.00" (when we use nothing) or "€ 12.590" (when we use a point).

In both methods we should take into consideration the decimal- and thousendseperation character per locale.

Although @SvenVoeten has the issue with the NumericInput I think the same goes for CurrencyInput.

[gvreddy04]

@Capellio Thank you for the detailed info. I'll check this.

[SvenVoeten]

Hi,

It seems that it indeed has to do with language settings.

Below you can see that I'm trying a point and a comma but both do nothing.

https://github.com/vikramlearning/blazorbootstrap/assets/65830467/8e579d8e-710c-498e-8b8f-ed95ed4fa039

When I switch my language to english (United States) its working as expected. I can't even enther the comma.

https://github.com/vikramlearning/blazorbootstrap/assets/65830467/07806492-370c-4e75-bcc5-6b6be9e89d0d

[gvreddy04]

@SvenVoeten What language you have on your machine?

[SvenVoeten]

@gvreddy04

Below a screenshot from my languages.

[gvreddy04]

@SvenVoeten Thank you for the info. I'll test this.

[gvreddy04]

@SvenVoeten

Please try the below approach and let me know.

<CurrencyInput TValue="decimal?" @bind-Value="@Price" Locale="nl-NL" />
@code{
    private decimal? Price;
}

Hide currency symbol:

<CurrencyInput TValue="decimal?" @bind-Value="@Price" Locale="nl-NL" HideCurrencySymbol="true" />
@code{
    private decimal? Price;
}

[NikPiermafrost]

Hi i tried the last suggestion and still doesn't work. My locale is it-IT and with HideCurrencySymbol it doesn't work

[MarvinKlein1508]

This is indeed a bug. Can reproduce it with local de-de as well. I've created 2 PR's to fix both NumberInput and CurrencyInput.

With this patches both of them work fine for me in Server, WebAssembly & .NET MAUI.