Last Updated: 11 Aug 2022 06:30 by ADMIN
Created on: 24 Feb 2020 09:58
Category: NumericTextBox
Type: Feature Request
Always highlight / select all content of the input on focus

At the moment, the selection behavior of the NumericTextBox 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.




The request is initially opened for the NumericTextBox but also targets some other components that incorporate inputs, such as DatePicker.

Posted on: 11 Aug 2022 06:30

Hi Greg,

I have raised the priority of this task in our internal backlog. The specific time frame for implementation is still not set, but you will receive a notification when we start, if you are following the item.

On a side note, I noticed that you haven't voted for it, so I did it on your behalf. Please do so whenever some item is important for you, as this helps us prioritize.

Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Posted on: 04 Aug 2022 19:04
Is this in development? This functionality is very desirable.
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.