'DialogOptions.AutoFocusFirstElement = true' seems not working #648

New Issue

claunia · 2026-01-29T17:40:53Z

claunia commented

2026-01-29 17:40:53 +00:00

Originally created by @OndrejUzovic on GitHub (Nov 19, 2022).

It seems the setting of DialogOptions.AutoFocusFirstElement = true is not working.

Note: I believe the correct behavior would be to autofocus the element with the lowest value of tabindex which is greater than -1. Or if all focusable elements have tabindex = -1 then the first one should get the focus.

Simple code to reproduce the issue:

@page "/"

@using Radzen;
@using Radzen.Blazor;

@inject DialogService DialogService

<div style="width:700px; height:500px; background-color:beige;">

    <RadzenCard>
        <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Inline Dialog</RadzenText>
        <RadzenButton Text="Dialog with inline Blazor content" Style="width: 100%;" ButtonStyle="ButtonStyle.Secondary" Click=@ShowInlineDialog />
    </RadzenCard>

    
</div>


@code {

    async Task ShowInlineDialog()
    {
        var dialogOptions = new DialogOptions() { AutoFocusFirstElement = true };

        await DialogService.OpenAsync("Simple Dialog", ds =>
        @<div style="display:grid;">
            <RadzenHtmlEditor TabIndex="1" />
            <RadzenTextBox TabIndex="2" />
            <RadzenTextBox TabIndex="3" />
        </div>, dialogOptions);
    }
}

Originally created by @OndrejUzovic on GitHub (Nov 19, 2022). It seems the setting of DialogOptions.AutoFocusFirstElement = true is not working. **Note:** I believe the correct behavior would be to autofocus the element with the lowest value of tabindex which is greater than -1. Or if all focusable elements have tabindex = -1 then the first one should get the focus. ![image](https://user-images.githubusercontent.com/55758368/202848597-2dd7cc5f-3d30-420f-b6b0-29b0ffe43790.png) Simple code to reproduce the issue: ``` @page "/" @using Radzen; @using Radzen.Blazor; @inject DialogService DialogService <div style="width:700px; height:500px; background-color:beige;"> <RadzenCard> <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Inline Dialog</RadzenText> <RadzenButton Text="Dialog with inline Blazor content" Style="width: 100%;" ButtonStyle="ButtonStyle.Secondary" Click=@ShowInlineDialog /> </RadzenCard> </div> @code { async Task ShowInlineDialog() { var dialogOptions = new DialogOptions() { AutoFocusFirstElement = true }; await DialogService.OpenAsync("Simple Dialog", ds => @<div style="display:grid;"> <RadzenHtmlEditor TabIndex="1" /> <RadzenTextBox TabIndex="2" /> <RadzenTextBox TabIndex="3" /> </div>, dialogOptions); } } ```

claunia closed this issue

2026-01-29 17:40:54 +00:00

claunia commented

2026-01-29 17:40:55 +00:00

@OndrejUzovic commented on GitHub (Nov 21, 2022):

I have upgraded to 4.3.7 but it seems it still does not work. The provided example code still does not show any cursor when the dialog window is open.
Is there anything incorrect in that example code?

@OndrejUzovic commented on GitHub (Nov 21, 2022): I have upgraded to 4.3.7 but it seems it still does not work. The provided example code still does not show any cursor when the dialog window is open. Is there anything incorrect in that example code?

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#648