Textbox Focus

1 Answer 133 Views
General Discussions TextBox Window
Vishnu
Top achievements
Rank 1
Iron
Veteran
Vishnu asked on 02 Dec 2021, 10:11 AM

Hi,

I have modal popup and I need to add Textbox Focus in first field in the window on loading.

 

 

Thanks,

Vishnu Vardhanan

1 Answer, 1 is accepted

Sort by
0
Apostolos
Telerik team
answered on 06 Dec 2021, 10:16 AM

Hello Vishnu,

All our input components offer a FocusAsync method that lets you focus them programmatically.

To implement the functionality, I'll provide the following step by step guidance:

  • Add a reference to the textbox that you want to focus:
    <TelerikTextBox @ref="@TextboxRef" />
    
    @code {
      TelerikTextBox TextboxRef { get; set; }
    }
  • When you set the Window's Visible attribute to true and the popup renders, the Blazor framework will fire the OnAfterRenderAsync event.
  • The OnAfterRenderAsync handler is the place to focus the desired textbox. Note that you will need a small delay ( await Task.Delay(300) ) to wait for the textbox JavaScript instance to initialize.
  • The OnAfterRenderAsync event fires a lot of times during the page life cycle. You will need a boolean flag to detect when to focus the textbox (e.g. FocusFlag ). Set this flag to true when you set the Window Visible attribute to true.

The following snippet demonstrates the above instructions. I also created this REPL example that you can use as reference.

<TelerikWindow @bind-Visible="@WindowIsVisible" Width="250px">
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowContent>
        <label for="name">Name</label>
        <br />
        <TelerikTextBox @ref="@TextboxRef" Id="name"></TelerikTextBox>
        <br />
        <label for="email">Email</label>
        <br />
        <TelerikTextBox InputMode="email" Id="email"></TelerikTextBox>
    </WindowContent>
</TelerikWindow>

<TelerikButton OnClick="@ToggleWindow">Open Window and Focus TextBox</TelerikButton>

@code {

    bool FocusFlag { get; set; } = false;
    bool WindowIsVisible { get; set; }
    TelerikTextBox TextboxRef { get; set; }

    async Task ToggleWindow()
    {
        WindowIsVisible = !WindowIsVisible;
        if (WindowIsVisible)
        {
            FocusFlag = true;
        }
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (WindowIsVisible && FocusFlag)
        {
            FocusFlag = false;
            await Task.Delay(300);
            await TextboxRef.FocusAsync();
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

Regards,
Apostolos
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/.

Vishnu
Top achievements
Rank 1
Iron
Veteran
commented on 23 Dec 2021, 06:55 AM

Hi Team,

Thanks for the update. Above is for the button click event. I need for Page Intialization and I have tried for Page Intialization and it's not working. Could please update on the same.

Vishnu
Top achievements
Rank 1
Iron
Veteran
commented on 04 Jan 2022, 11:05 AM

Could you please update on the same

Thanks,

Vishnu Vardhanan

Tags
General Discussions TextBox Window
Asked by
Vishnu
Top achievements
Rank 1
Iron
Veteran
Answers by
Apostolos
Telerik team
Share this question
or