NumericEdit: Attribute type="number" missing

[AchimStuy]

Describe the bug NumericEdits should have the HTML-Attribute type="number" set.

To Reproduce This Problem is also in the Demo-Application (https://rcbootstrapdemo.blazorise.com/tests/forms). I need it for Blazor Server, but it is also in WebAssembly-Demo.

Expected behavior Attribute type="number" should be set on the HTML-\<input>

[stsrki]

Unfortunately it cannot be done without breaking existing code. The thing is that NumericEdit have an edit mask implemented. It relies heavily on the text selection and current caret position. With type="numeric" there is no way that I can have that information.

[AchimStuy]

Ah, okay. But why then is it working in the docs? https://blazorise.com/docs/components/numeric/

Until now I worked around it by specifying type="number" manually, like:

<NumericEdit Value="123" type="number" />

[stsrki]

Well, I cheeted in the documentation. The thing is that documentation is not running on blazor but on jekyl static site generator. When I first created Blazorise there was no server side blazor or any type of prerendering. I didnt want to use csb as it was pretty slow, not to mention lack of markdown support. I plan to create new custom cms in Blazorise but that will take time.

Back to your problem. Your solution might work but it can lead to some side efects in case it clashes with built in edit mask that is running on javascript.

[StefH]

Indeed, there is difference:

<EditForm Model="person">
    <Row>
        <Column ColumnSize="ColumnSize.Is1">
            <NumericEdit @bind-Value="person.Age" Decimals="0" Min="0" Max="99" />
        </Column>

        <Column ColumnSize="ColumnSize.Is1">
            <InputNumber @bind-Value="person.Age" />
        </Column>
    </Row>
</EditForm>

@code
{
    class Person
    {
        public int Age { get; set; }
    }

    Person person = new Person
    {
        Age = 42
    };
}

Example:

The only thing missing the step-up and step-down. So if you could just add that?

[StefanOssendorf]

An added type="number" omits all other provided attributes like Min, Max and so on. My work-around is (as long as you are not within a form):

<input type="number" min="@YourMin" step="@($"{YourStep.ToString("N", System.Globalization.CultureInfo.InvariantCulture)}")" max="@YourMax" decimals="@YourDecimals" @bind-value="YourModel" />

I need the selected step-approach to avoid localization bugs. German for example uses "," as decimal separator which is not valid in the html markup.