Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 08 Dec 2022 08:51 by ADMIN
Buddhi
Created on: 01 Dec 2022 12:56
Category: UI for Blazor
Type: Bug Report
2
Numeric Box content is getting cleared automatically

In my blazor application, I have to use a numeric box component . In order to do that, I have created a custom numeric box component like below.  my issue is while I am typing something on the numeric box, time to  time some characters are automatically getting cleared. I have to type those again and again .i don't know what is the issue behind this.




<span @onfocusin="@FocusComponentAsync" @ref="@InputWrapperRef">

                <TelerikNumericTextBox Value="Amount"
                                       ValueChanged="(decimal val)=>OnBlNumercChanged(val)"
                                       Arrows=false>

                </TelerikNumericTextBox>
</span>



@code{

    private ElementReference InputWrapperRef { get; set; }

    private decimal Amount;

                        
    protected override void OnParametersSet()
    {
            this.StateHasChanged();
           
            base.OnParametersSet();
    }    

    private async void OnBlNumercChanged(decimal value)
    {

       //code   
    }

    public async void OnNumericBoxKeyUp(KeyboardEventArgs e){

       //code

    }

    public async Task FocusComponentAsync()
    {
       await _jsRuntime.InvokeVoidAsync("highlightInput", InputWrapperRef);
    }

}


window.highlightInput = (inputWrapper) => {
    var input = inputWrapper.querySelector("input");
    if (!input) return;
    input.select();
}

1 comment
ADMIN
Svetoslav Dimitrov
Posted on: 08 Dec 2022 08:51

Hello Buddhi,

Thank you for the runnable reproduction. The behavior originates from the fact that the Value of the NumericTextBox is not updated in the ValueChanged event handler. I have modified the snippet so that it does and the component works as expected:

@inject IJSRuntime _jsRuntime

<span @onfocusin="@FocusComponentAsync" @ref="@InputWrapperRef">

    <TelerikNumericTextBox Value="Amount"
                           ValueChanged="(decimal val)=>OnBlNumercChanged(val)"
                           Arrows=false>

    </TelerikNumericTextBox>
</span>

<script suppress-error="BL9992">
    window.highlightInput = (inputWrapper) => {
        var input = inputWrapper.querySelector("input");
        if (!input) return;
        input.select();

    }
</script>

@code {
    private ElementReference InputWrapperRef { get; set; }

    private decimal Amount;


    protected override void OnParametersSet()
    {
        this.StateHasChanged();

        base.OnParametersSet();
    }

    private async void OnBlNumercChanged(decimal value)
    {
        Amount = value; //update the value 
        //code
    }

    public async void OnNumericBoxKeyUp(KeyboardEventArgs e)
    {

        //code

    }

    public async Task FocusComponentAsync()
    {
        await _jsRuntime.InvokeVoidAsync("highlightInput", InputWrapperRef);
    }
}

That being said, I am marking this bug report as Declined as this is the expected behavior when the value is not updated.

Regards,
Svetoslav Dimitrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Create an account Log In
View
Type
Status
Category