Trying to Set Focus to textbox in Blazor

Does anyone have a tutorial on how i would go about setting focus to a textbox on page load, or change?

Here is an example:

await JSRuntime.InvokeVoidAsync("eval", $@"document.getElementById(""textbox0"").focus()")

1 Like

I can't get this to work using Blazor Radzen on a Blazor Web Assembly project. Here's my textbox

<Radzen.Blazor.RadzenTextBox @bind-Value=@glJournalBatchIn.EditBatchDesc Name="EditBatchDesc" Style="width:100%" />

The Invoke
{ await JSRuntime.InvokeVoidAsync("EditBatchDesc", $@"document.getElementById(""EditBatchDesc"").focus()"); }

It fires, but I get this error:
at do_icall (:wasm-function[10596]:0x194e58)
Microsoft.JSInterop.JSException: Could not find 'EditBatchDesc' ('EditBatchDesc' was undefined).
Error: Could not find 'EditBatchDesc' ('EditBatchDesc' was undefined).
at https://localhost:44346/_framework/blazor.webassembly.js:1:1287

You are missing id attribute

Thank you for the quick reply. Can you be more specific? What do you mean by Id Attribute? I don't see it. I'm new to Radzen and using Visual Studio .Net 5 project. I thought Name="EditBatchDesc" was the Id of the textbox. Can you give me an example of how the RadzenTextBox should be? Thanks!

Name property will be rendered as name attribute of the input. There is no Id property - you just need to set id attribute - nothing else. All Radzen Blazor components can handle arbitrary attributes:

Thank you for the link. However I am still getting an error after I add the id attribute:

With id="EditBatchDesc" added.
RadzenTextBox id="EditBatchDesc" @bind-Value=@glJournalBatchIn.EditBatchDesc Name="EditBatchDesc" TabIndex="0"

Now new error:
Microsoft.JSInterop.JSException: The value 'EditBatchDesc' is not a function.
Error: The value 'EditBatchDesc' is not a function.


The original answer uses "eval" as the first parameter of InvokeVoidAsync ... Check it again and fix your code.

Thank you korchev - Yes Sir, that did the trick! I couldn't tell what "eval" was because the original post didn't show any of the other lines of code that were involved, so I was guessing. When I was using it earlier, I didn't have the id= on the textbox so I had changed it in troubleshooting effort. Thanks!

I tried to run your example but i have the follow error:
'JSRuntime' does'not contains a definiton for 'InvokeVoidAsync' What do you suggest to do?

File .radzen:
<RadzenDropDown style="width: 100%;" Name="Payment" 
   @bind-Value="@Payment" Placeholder="Payment" Data="@ListPayment"
   TextProperty="Description" ValueProperty="Id">

File .cs:
using Microsoft.JSInterop;
await JSRuntime.InvokeVoidAsync("eval", $@"document.getElementById(""Payment"").focus()");

Hey @AndreaSpada,

You need to inject JSRuntime:

@inject IJSRuntime JSRuntime;

Please do not post duplicate threads.

Sir, I've tried this & It's Working for Textbox, However it's Not Working for Numeric Input,
Do I need to change something in my Code???

RadzenNumeric has its own FocusAsync method:

I'm using .Net core 3.0

Sir, can you be more specific, How can i implement this???

Sir, I've tried this,
An error is showing up Saying "Element Reference is not Configured properly"

Please HELP

I can't reproduce such an error. If you have a Radzen Professional subscription you can send us your project to troubleshoot it further.