Last Updated: 28 Aug 2020 15:16 by ADMIN
Created on: 24 Feb 2020 09:58
Category: NumericTextBox
Type: Feature Request
Always highlight all NumericTextbox content on focus

At the moment, the selection behavior can vary depending on the Format - the Format is what is shown when the input does not have focus, and the Decimals control the actual number the user will see when they focus. Of both differ (for example, the Format has more decimal places, or some other information like a unit of measurement), the input value changes on focus, which removes the selection (highglight).

I would like the numeric textbox to always select all its content when it gets focused (either with the Tab key, or with a click).

Note on general input behavior - using Tab to focus in a field usually defaults to all the contents being selected, while a click results in a cursor without selection.

Marin Bratanov
Posted on: 28 Aug 2020 15:16

Here is a workaround that you can consider for the time being:

first, capture the focusin event

@inject IJSRuntime JsInterop

<span @onfocusin="@FocusInput" @ref="@InputWrapperRef">
    <TelerikNumericTextBox @bind-Value="@theValue" />

    int theValue { get; set; }
    ElementReference InputWrapperRef { get; set; }
    async Task FocusInput()
        await JsInterop.InvokeVoidAsync("highlightInput", InputWrapperRef);

then invoke JS that will find the first input and highlight its contents (focusing and manipulating text selection and ranges does not have "native" Blazor API yet)

        function highlightInput(inputWrapper) {
            var input = inputWrapper.querySelector("input");
            if (!input) return;

Marin Bratanov
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/.

Marin Bratanov
Posted on: 25 Feb 2020 11:47

Thank you for the context information, Jamie, I appreciate it.

We will consider exposing a feature for this, maybe event an enum that will let you control the highlight on focus (all ,or cursor at end, why not cursor at start). What I am saying is a preliminary idea, of course, once this gets reviewed in more detail, we will know more and update this item and the docs.


Posted on: 24 Feb 2020 15:23

Hi Support,

I use formatting to help distinguish between fields that are currency and others that might be quantity.

For me, the NumericTextbox I've implemented inside my forms are generally filled in by "number crunching" users and they usually just go with the flow of a form. Not worrying where the cursor is inside the selected field.

I've noticed that when the cursor is set at the end of the input field, some of my users just start typing and often end up adding numbers to an existing one.

Obviously this is only an issue when updating a form since generally speaking on creation my fields are set to 0 and this preceding 0 just ends up disappearing.

I would see this behaviour as complementary to the Numpad on their keyboards in terms of ease of use and speed.

I hope this helps to clarify a little bit.