Cannot set textbox focus on a tab change

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 02 May 2023 09:08 by ADMIN

Chris

Created on: 25 Apr 2023 12:29

Category: UI for Blazor

Type: Bug Report

Cannot set textbox focus on a tab change

I can't find a way to reliably set focus after a tab change.
In the sample below it first sets focus based on the OnAfterRenderAsync code, but switching to tab 2 and then going back I can't get it to set focus again.

I suspect its because there is no render type of event on a specific tab that I can hook into?
I have tried javascript and blazor and can't seem to figure a way around it.

@page "/test"

<TelerikTabStrip ActiveTabIndex="@TabActiveIndex" Height="87vh" Class="ct-tabstrip" ActiveTabIndexChanged="@TabIndexChanged">
<TabStripTab Title="Orders Search">
<input type="text" @ref=orderSearchTextBox id="test"/>
<br />
<input type="text" />
<br />
<input type="text" />
</TabStripTab>
<TabStripTab Title="Orders Updated Today">
<text>Tab 2</text>
</TabStripTab>
</TelerikTabStrip>

@code {
private ElementReference orderSearchTextBox;
private int TabActiveIndex;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await orderSearchTextBox.FocusAsync();

}
}
public async Task TabIndexChanged(int NewIndex)
{
TabActiveIndex = NewIndex;
if (NewIndex == 0)
{
await orderSearchTextBox.FocusAsync();
}
}
}

1 comment

ADMIN

Hristian Stefanov

Posted on: 02 May 2023 09:08

Hi Chris,

The described behavior is a result of the "ActiveTabIndexChanged" getting invoked before everything in the tab has been entirely rendered. Typically, this event does not track the rendering of individual elements within the tab.

Having said this, in order to achieve the desired outcome, you need to allow for additional time to render the input, which can be accomplished by manually introducing a slight delay (via "Task.Delay(...)") before calling the "FocusAsync()" method as the input needs a little more time to render.

The following example demonstrates this approach and illustrates the desired focus change:

<TelerikTabStrip ActiveTabIndex="@TabActiveIndex" Height="87vh" Class="ct-tabstrip" ActiveTabIndexChanged="@TabIndexChanged">
    <TabStripTab Title="Orders Search">
        <input type="text" @ref=orderSearchTextBox id="test" />
        <br />
        <input type="text" />
        <br />
        <input type="text" />
    </TabStripTab>
    <TabStripTab Title="Orders Updated Today">
        <text>Tab 2</text>
    </TabStripTab>
</TelerikTabStrip>

@code {
    private ElementReference orderSearchTextBox;
    private int TabActiveIndex;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await orderSearchTextBox.FocusAsync();
        }
    }
    public async Task TabIndexChanged(int NewIndex)
    {
        TabActiveIndex = NewIndex;
        if (NewIndex == 0)
        {
            await Task.Delay(50);
            await orderSearchTextBox.FocusAsync();
        }
    }
}

Please run and test the above code to see the result.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!