NumericEdit Decimal not dynamically handled

[thierrylio]

Hello,

I'm working on a page with the NumericEdit component and Decimals property doesn't work like I think it should:

<NumericEdit TValue="@(decimal?)"
             @bind-Value="Value"
             Decimals="Scale">
</NumericEdit>
<Button Clicked="@OnButtonClicked">-</Button>

@code {
    public int Scale { get; set; } = 2;
    public decimal? Value { get; set; } = (decimal)12.34;

    void OnButtonClicked()
    {
        --Scale;
    }
}

1. Click on Button "-"
2. NumericEdit value should be "12.3"
3. Try enter a new value, 2 decimals remain set

Note the same issue for Min and Max.

[stsrki]

I'm trying your code sample and it's working for me. Two decimals are applied.

Maybe it's because you have different culture. Try changing it

<NumericEdit TValue="@(decimal?)"
                @bind-Value="Value"
                Decimals="Scale"
+                Culture="en-US">

[thierrylio]

That is right, first render is ok (with 2 decimals).
But when I click the "-" button (to decrease decimals), value should change to 12.3 then 12 with an other click.

[stsrki]

Ah, so you want to change the decimals dynamically? Well, I can probably make it work, somehow, but I don't see why would you do it.

For example, if you make smaller decimals you would lose data, so for example if you have 12.34 for start, make it to 12 by lowering decimals, and then up, you will get 12.00. Is that OK?

[thierrylio]

Yes it is ok. Of course this code is not my real use case.
Here is the final job : an input component for temperature with unit choice. When the user switch from °C, °F or Kelvin, NumericEdit parameters Decimals et Min must adjusted.

[stsrki]

I tried to make it work by using an if statement to recreate NumericEdit for each option but it still not working.

<Addons>
    <Addon AddonType="AddonType.Body">
        @if ( unit == "kelvin" )
        {
            <NumericEdit TValue="decimal" Value="@temperature" Decimals="1" />
        }
        else if ( unit == "celsius" )
        {
            <NumericEdit TValue="decimal" Value="@temperature" Decimals="2" />
        }
    </Addon>
    <Addon AddonType="AddonType.End">
        <Dropdown>
            <DropdownToggle Color="Color.Primary">@unit</DropdownToggle>
            <DropdownMenu>
                <DropdownItem Clicked="@(()=>unit="kelvin")">kelvin</DropdownItem>
                <DropdownItem Clicked="@(()=>unit="celsius")">celsius</DropdownItem>
            </DropdownMenu>
        </Dropdown>
    </Addon>
</Addons>
@code{
    decimal temperature = 12.34m;
    string unit = "kelvin";
}

I expected to at least initialize input with decimal places, but no luck. It seems this is a known problem https://stackoverflow.com/questions/22641074/html5-number-input-always-show-2-decimal-places

Going on list as a bug.

[Texnomic]

The BuildRenderTree functions always sets inputmode to numeric even if TValue is set to decimal.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

__builder.AddAttribute(2, "inputmode", "numeric");

<input id="0HM75QGA95EV1" inputmode="numeric" class="form-control" placeholder="Amount" _bl_18f8e820-d16c-4e1c-ba8f-1ca63b21fa3d="">

[stsrki]

NumericEdit is for numeric values. I don't see a reason why it wouldn't be set to inputmode="numeric". Can you explain @Texnomic ?

[Texnomic]

@stsrki Because of whole vs fraction number support, based-on this https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

[stsrki]

I must admit you're right. I never even noticed that inputmode="decimal" is available. Thanks for pointing it!

[claunia]

Ah, so you want to change the decimals dynamically? Well, I can probably make it work, somehow, but I don't see why would you do it.

For example, if you make smaller decimals you would lose data, so for example if you have 12.34 for start, make it to 12 by lowering decimals, and then up, you will get 12.00. Is that OK?

I have another use case. When inputting a price/cost field, where you can have several currencies, you need not only to change the decimal numbers for each currency, also the culture, as it's not the same £3.00 than 3,00€, but if you pass es-es with GBP it will print 3,00£ that's incorrect, and with en-gb it will print €3.00 that's incorrect as well.

I think it's a pretty solid reason to be able to dynamically bind not only the decimal points but also the culture.

[stsrki]

<Addons>
    <Addon AddonType="AddonType.Body">
        <NumericEdit TValue="decimal" @bind-Value="@temperature" Decimals="@(unit=="kelvin"?1:2)" />
    </Addon>
    <Addon AddonType="AddonType.End">
        <Dropdown>
            <DropdownToggle Color="Color.Primary">@unit</DropdownToggle>
            <DropdownMenu>
                <DropdownItem Clicked="@(()=>unit="kelvin")">kelvin</DropdownItem>
                <DropdownItem Clicked="@(()=>unit="celsius")">celsius</DropdownItem>
            </DropdownMenu>
        </Dropdown>
    </Addon>
</Addons>
@code{
    decimal temperature = 12.34m;
    string unit = "kelvin";
}