[Bug]: NumericPicker Decimal not dynamically handled

[Murraad]

Blazorise Version

1.2.3

What Blazorise provider are you running on?

None

Link to minimal reproduction, or a simple code snippet

Hello, I have similar issua as there
#1703
Is it possible now to change Decimals in NumericPicker dynamically?
Small example, component with some css that I didn't included(margin, paddings, nothing more.
Thank you

<Div Position="Position.Relative">
    <NumericPicker @ref="@_picker" @bind-Value="@Value"
                 TValue="decimal"
                 Max="@Max"
                 Min="@Min"
                 Decimals="@QuantityPrecision"
                 Placeholder="@Placeholder"
                 Class="decimal-numeric-editor"
                 Disabled="@Disabled"
                 FocusIn="@FocusIn"
                 FocusOut="@FocusOut"/>
    <Span Class="decimal-numeric-editor-measurement" Position="Position.Absolute">@Measurement</Span>
    @ValidationResults
</Div>

@code {
    private NumericPicker<decimal> _picker;
    private decimal _value;

    [Parameter, Range(0,3)]
    public int QuantityPrecision { get; set; }

    [Parameter]
    public bool Disabled { get; set; }

    [Parameter]
    public decimal Max { get; set; } = decimal.MaxValue;

    [Parameter]
    public decimal Min { get; set; }

    [Parameter]
    public string Measurement { get; set; }

    [Parameter]
    public string Placeholder { get; set; }

    [Parameter]
    public decimal Value
    {
        get => _value;
        set
        {
            if (_value == value)
            {
                return;
            }
            
            _value = value;
            ValueChanged.InvokeAsync(_value);
        }
    }
    
    [Parameter]
    public EventCallback<decimal> ValueChanged { get; set; }
    
    [Parameter]
    public RenderFragment ValidationResults { get; set; }
    
    [Parameter]
    public EventCallback FocusIn { get; set; }
    
    [Parameter]
    public EventCallback FocusOut { get; set; }
}

Steps to reproduce

Change QuantityPrecision property(tried even put there StateHasChanged) from 0 to 2

What is expected?

Can type '.' in NumericPicker

What is actually happening?

Data is correct, if there is 50 it will be 50.00, but I can not type '.' directly. But I can paste decimal number with dot

What browsers are you seeing the problem on?

Chrome

Any additional comments?

No response

[stsrki]

Can you try with DecimalSeparator parameter?

<Div Position="Position.Relative">
    <NumericPicker @ref="@_picker" @bind-Value="@Value"
                 TValue="decimal"
                 Max="@Max"
                 Min="@Min"
                 Decimals="@QuantityPrecision"
                 Placeholder="@Placeholder"
                 Class="decimal-numeric-editor"
                 Disabled="@Disabled"                 
                 FocusIn="@FocusIn"
                 FocusOut="@FocusOut"
+                 DecimalSeparator="."/>
    <Span Class="decimal-numeric-editor-measurement" Position="Position.Absolute">@Measurement</Span>
    @ValidationResults
</Div>

[Murraad]

Just tried, removed my component from page and put directly NumericPicker. Doesn't work

foreach (var orderLine in state.OrderLines)
  {
      if (state.SelectedItem.Number.Equals(orderLine.OrderItem))
      {
          
          <NumericPicker @bind-Value="@_assignQuantity"
                         TValue="decimal"
                         Decimals="@state.SelectedItem.QuantityPrecision"
                         Placeholder="@Localizer.AssignQuantity.Text"
                         Class="decimal-numeric-editor"
                         DecimalSeparator="."/>
          @* <DecimalEditor Placeholder="@Localizer.AssignQuantity.Text"  *@
          @*                QuantityPrecision="@state.SelectedItem.QuantityPrecision"  *@
          @*                @bind-Value="@_assignQuantity"/> *@
      }
  }

[stsrki]

I'm trying the same example as you have, and it works as expected on my machine. Is there anything else in your project that might interfere? Maybe locale settings?

[Murraad]

So you first select NumericPicker with 0 Decimals and than change it to 2, and you can type "."?
Can you send your example, please?

[stsrki]

Here is my stripped example

<NumericPicker @ref="@_picker" @bind-Value="@Value"
               TValue="decimal"
               Max="@Max"
               Min="@Min"
               Decimals="2"
               Class="decimal-numeric-editor" />
@code {
    private NumericPicker<decimal> _picker;
    private decimal _value;

    [Parameter]
    public bool Disabled { get; set; }

    [Parameter]
    public decimal Max { get; set; } = decimal.MaxValue;

    [Parameter]
    public decimal Min { get; set; }

    [Parameter]
    public string Measurement { get; set; }

    [Parameter]
    public string Placeholder { get; set; }

    [Parameter]
    public decimal Value
    {
        get => _value;
        set
        {
            if ( _value == value )
            {
                return;
            }

            _value = value;
            ValueChanged.InvokeAsync( _value );
        }
    }

    [Parameter]
    public EventCallback<decimal> ValueChanged { get; set; }
}

I have even tried putting it all in its own component, but it is all the same. It works as expected.

[Murraad]

Decimals="2"
In your case decimals is 2 from start, it works for me too. But when I change from 0 to 2 I can not type '.'. But if I first set 2, then change to 0 and again to 2 everything works

[David-Moreira]

@stsrki @Murraad Is there an issue here? Can you clarify.

[stsrki]

It seems that we have disabled dynamically changing of Decimals in the code. We can try fixing it and see if the problem still persist.

[Murraad]

Thank you

[stsrki]

I'm working on this now, and it seems to be working as expected. Dynamically changing the Decimals is working. Here is my test code

<Row>
    <Column ColumnSize="ColumnSize.Is6.OnDesktop.Is12.OnMobile">
        <Card Margin="Margin.Is4.OnY">
            <CardBody>
                <Slider @bind-Value="@QuantityPrecision" Min="2" Max="6" />
            </CardBody>            
            <CardBody>
                <NumericPicker @bind-Value="@Value"
                               TValue="decimal"
                               Decimals="@QuantityPrecision" />
            </CardBody>
        </Card>
    </Column>
</Row>

@code {
    int QuantityPrecision = 2;
    decimal Value;
}

I'm using Slider to update the Decimals value.

[github-actions]

This is an automated message reminding that this issue is expecting the author's answer.

[stsrki]

Closing because we were unable to reproduce an issue.