[Solved] numeric text box up/down arrows do not work

[Joel]

For my numeric text box, the up/down arrows do not work in a form.  I did a copy/paste from your example here:

https://www.telerik.com/blazor-ui/documentation/components/numerictextbox/overview

<TelerikForm Model="@Account"
             OnValidSubmit="@OnSave"
             OnInvalidSubmit="@OnInvalidSubmit"
             Class="gsi-margin-10">

    <FormValidation>
        <DataAnnotationsValidator />
    </FormValidation>

    <FormItems>

...

        <FormItem Field="@nameof(Account.theValue)">
            <Template>
                <LabelFor Model="@Account"
                          DisplayName="Text Value" />

                <TelerikNumericTextBox @bind-Value="@Account.theValue"
                                       Format="C"
                                       Max="5m" Min="-5m"
                                       Step="0.33m" />
            </Template>
        </FormItem>
    </FormItems>

        [NotMapped]
        public decimal theValue { get; set; } = 1.234m;

[Hristian Stefanov]

Hi Joel,

I tried to reproduce the issue by copying the provided Form structure, and the arrows seem to work correctly on my end as well as in several local projects. Here is the sample I used for testing: REPL link.

Please run and test the REPL sample to check whether you get the same result.

Kind Regards,

Hristian

[Joel]

I have used this numeric control about 6 times in my code and none of them work.  I start a test project and it works fine.  I bind it to an object and tried it bound to the component model.  It will bind to the number so it reflects the value correctly but those up/down arrows do not work.  The other Telerik controls on the page work as expected.  How do I troubleshoot this?

[Joel]

I reviewed to ensure I am using the interactive server mode.  Is there a way to see the binding activity?

 

[Hristian Stefanov]

Hi Joel,

To troubleshoot this further, can you:

• Replace the NumericTextBox with a standard Blazor <InputNumber />
• Output the value as plain text outside the box.
• Change the textbox value and blur the component.

Let me know the result.

Kind Regards,

Hristian

[Joel]

I was able to replace it with the InputNumber without issue.  I don't understand why the NumericTextBox was failing.

[Joel]

Also, your control is failing even in the Form where it is not specifically defined.  ExecutionOrder is an integer on the Model:

    <TelerikForm Model="@Script"
                 OnValidSubmit="@OnValidSave"
                 OnInvalidSubmit="@OnInvalidSave"
                 Class="gsi-padding-10">
        <FormItems>

            <FormItem Field="@nameof(Script.Id)"
                      LabelText="@nameof(Script.Id)"
                      Enabled="false" />

            <FormItem Field="@nameof(Script.ExecutionOrder)"
                      LabelText="@nameof(Script.ExecutionOrder).ParseByCase()" />

...

[Hristian Stefanov]

Hi Joel,

Would it be possible for you to reproduce the issue in a runnable project or a REPL example with some dummy data? That would let me run it on my side and observe the behavior firsthand.

Your configuration looks correct, and I’ve tested the same setup multiple times in both REPL and local projects where the Form and NumericTextBox behave as expected. This makes me think there might be some additional code or layout affecting things on your end - perhaps component nesting or another wrapper interfering with the behavior.

I really appreciate the effort you’ve put into this, and I’m looking forward to a runnable sample so we can get this resolved as quickly as possible.

Kind Regards,

Hristian

[Joel]

I created a side project and tried the exact same scenarios... and they all work.  So, I don't know the eco-system required to reproduce the situation.  What is still puzzling is that the binding works because the numeric value shows what is expected and registers the new value when changed.  But, the up/down arrows just don't work.

[Hristian Stefanov]

Hi Joel,

Thank you for your update. This seems to confirm that the issue originates from the environment settings in the project or from other functions or styles that have been set up. Without a runnable repro, it’s difficult to pinpoint the exact cause.

However, as a next step, I recommend carefully double-checking the project for any JavaScript, styles, or interactive elements that could be affecting it. You can also try removing parts of the project one by one to identify where it starts working. Additionally, please ensure that the theme and the JavaScript files are correctly loaded.

Kind Regards,

Hristian

[Joel]

Thanks, I agree.  I use the Telerik Theme builder and I know that is applied.  The styling works fine everywhere in the app so I don't believe it to be that.  Other control animations like... the expanding calendar on the datetime fields works fine, etc.  So, the problem seems very specialized to just these up/down arrows.

[Hristian Stefanov]

Hi Joel,

Indeed, the behavior appears to be specific to your project environment. I remain at your disposal to assist further as you narrow it down with the previous guidance - for example, by progressively removing parts of the project to isolate the cause, or by providing a runnable reproduction once available.

Kind Regards,

Hristian