Focus Button or TextBox on Window Open
Environment
Product | Dialog for Blazor, Window for Blazor |
Description
This KB article answers the following questions:
- How to set default focus to a TextBox or a Button in a Telerik UI for Blazor Window?
- How to focus a button or a textbox inside a Window when the Window is made visible?
- How to focus a component after the Window opens? The JavaScript call is made before the Window actually shows, so the focusable element is
null
. - How do you set focus on an input element in a Window, so that the user doesn't have to use their mouse?
Solution
To focus any element or component in the Telerik UI Window for Blazor, follow the steps below. They are also applicable for the Dialog component.
- To focus a Telerik UI for Blazor component, set the
@ref
attribute to obtain the component's reference. - Raise a
bool
flag when showing the Window. - Check the boolean flag's value in
OnAfterRenderAsync()
. - Use a small
Task.Delay()
to wait for the Window to display and gain focus. Without a delay, the focusable component will either not exist yet, or the Window will steal the focus. - Focus the desired button, textbox, or input component. If it's a Telerik UI for Blazor component, use the
FocusAsync()
method.
Focus a component on Dialog or Window open
<TelerikButton OnClick="@ShowWindow">Show Window and Focus Button</TelerikButton>
<TelerikButton OnClick="@ShowDialog">Show Dialog and Focus TextBox</TelerikButton>
<TelerikWindow @bind-Visible="@WindowVisible"
Modal="true">
<WindowActions>
<WindowAction Name="Close" />
</WindowActions>
<WindowTitle>
Window
</WindowTitle>
<WindowContent>
<p>This Button is now focused:</p>
<TelerikButton @ref="@ButtonRef"
OnClick="@OnWindowButtonClick">
Click Me
</TelerikButton>
<p><code>StringValue</code>: @StringValue</p>
</WindowContent>
</TelerikWindow>
<TelerikDialog @bind-Visible="@DialogVisible"
Title="Dialog"
ButtonsLayout="@DialogButtonsLayout.End">
<DialogContent>
<TelerikTextBox @ref="@TextBoxRef" @bind-Value="@StringValue" />
</DialogContent>
<DialogButtons>
<TelerikButton OnClick="@( () => DialogVisible = false )">Close</TelerikButton>
</DialogButtons>
</TelerikDialog>
@code {
private TelerikButton? ButtonRef { get; set; }
private TelerikTextBox? TextBoxRef { get; set; }
private string StringValue { get; set; } = string.Empty;
private bool WindowVisible { get; set; }
private bool DialogVisible { get; set; }
private bool ShouldFocusButton { get; set; }
private bool ShouldFocusTextBox { get; set; }
private void ShowWindow()
{
WindowVisible = true;
ShouldFocusButton = true;
}
private void ShowDialog()
{
StringValue = string.Empty;
DialogVisible = true;
ShouldFocusTextBox = true;
}
private void OnWindowButtonClick()
{
var now = DateTime.Now;
StringValue = $"{now.ToString("HH:mm:ss")}.{now.Millisecond}";
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (ShouldFocusButton && ButtonRef != null)
{
ShouldFocusButton = false;
// Wait for the Window to render and gain focus.
await Task.Delay(200);
await ButtonRef.FocusAsync();
}
if (ShouldFocusTextBox && TextBoxRef != null)
{
ShouldFocusTextBox = false;
// Wait for the Dialog to render and gain focus.
await Task.Delay(200);
await TextBoxRef.FocusAsync();
}
await base.OnAfterRenderAsync(firstRender);
}
}