RadzenNumeric Select text on focus

Radzen.Blazor Components
1

We got a request that when a text box or number box gets focus that it would auto select all the text in the boxes. When trying to do that with the following I am noticing that it is being applied to the span and not the input element.

<RadzenNumeric @ref="testRef" onClick="this.select()" ShowUpDown="false" @bind-value="@SelectedPriority" TValue="int" Disabled=@((int)SelectedJobStatus>2) Style="height: 50px; width: 100%; text-align: center;" Min="1"/>

We are currently running .Net 6, Radzen version 3.16.3

2

Yes, RadzenNumeric is a complex component not just an input. You can use childNodes to get reference to the input.

3

That is unfortunate, would be great to see an option on the component to automatically add the select functionality.

For others whom may run across this topic...I ended up creating this javascript in my _Layout and referencing it in any page I need to add the select functionality. I bind the select to an ID and have a dummy check so that it will not explode upon the element not existing yet. Then inside the OnAfterRenderAsync sections I have the following JsRuntime command.

function bindSelect(elementToBind) {
            var elementToCheck = document.getElementById(elementToBind);
            if (elementToCheck) {
                for (let child of elementToCheck.childNodes) {
                    if (child instanceof HTMLInputElement) {
                        child.addEventListener('click',
                            function() {
                                this.select();
                            });
                    }
                }
            }
        }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            //Do Stuff with elements on the page
            StateHasChanged();
            await JsRuntime.InvokeAsync<string>("bindSelect", "numericField");
        }
    }
4

Here is much easier approach:

image
image1920×1080 356 KB

1 Like
5

I would like to select the text when focused. The "onclick" works properly (selects the text), but when I changed the "onclick=" to "onfocus=", it does not select the text in response to the FocusAsync() (the cursor displays immediately after the text that I want selected).

6

This works for me:

image
image1920×1080 462 KB

numeric-focus-select

7

I just read the original post again, and I see that their issue was during the onClick, not the onFocus. My issue is with onFocus not responding to the FocusAsync().

FYI: In order to also get FocusAsync() to work, change the onfocus() to onfocusin():

<RadzenNumeric @ref=NumericRef TValue="int" class="w-100" @bind-Value=ProductionNumber
                    onclick="this.querySelector('.rz-spinner-input').select()"
                    onfocusin="this.click()"/>
8

It has been working for me for quite some time.

But now it doesn't work anymore and I get errors in the console

"
<RadzenNumeric Name="RdzSCarga"
@ref=RdzSCarga
@bind- Value=infoEnPantalla.Carga
ShowUpDown=false
onclick="this.querySelector('.rz-spinner-input').select()"
onfocusin="this.click()"
@onkeypress=Carga_OnKeyPress>


"

This is the Error :

Uncaught TypeError: Cannot read properties of null (reading 'select')
at HTMLSpanElement.onclick (ExpedicionesTerminalList:1:40)
at HTMLSpanElement.onfocusin (ExpedicionesTerminalList:1:6)
at Object.focusFirstFocusableElement (Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version):1363:30)
at Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version):1450:24

9

The name of the class has changed. Use rz-numeric-input instead of rz-spinner-input.