Prevent the focus on the first element in Blazor Dialog Component
7 Aug 20232 minutes to read
By default, the Blazor dialog focuses on the first elements of the content area which can be active and focusable. You can prevent this default focusing behavior using the Opened
event and by enabling the PreventFocus
argument.
Bind the Opened event and enable the PreventFocus argument within an event like the following example.
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>
<SfDialog Width="300px" @bind-Visible="@IsVisible">
<DialogEvents Opened="@onOpen"></DialogEvents>
<DialogTemplates>
<Header> Sign In </Header>
<Content>
<div class='form-group'>
<label for='email'>Email:</label>
<input type='email' class='form-control' id='email'>
</div>
<div class='form-group'>
<label for='comment'>Password:</label>
<input type='password' class='form-control' id='password'>
</div>
</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />
<DialogButton Content="Cancel" OnClick="@CloseDialog" />
</DialogButtons>
</SfDialog>
@code {
private bool IsVisible { get; set; } = true;
private void OpenDialog()
{
this.IsVisible = true;
}
private void CloseDialog()
{
this.IsVisible = false;
}
private void onOpen(OpenEventArgs args)
{
args.PreventFocus = true;
}
}