[dev-v5] fix: keyboard support for `FluentDataGrid` when being using in Drawer/Dialog

[MarvinKlein1508]

🐛 Bug Report

Keyboard support for FluentDataGrid is broken when it's being used within a Drawer/Dialog.

💻 Repro or Code Sample

Copy this code into SimpleDialog.razor in the demos:

@inherits FluentDialogInstance

<FluentDialogBody>
    <FluentTextInput Label="Name:" @bind-Value="@Name" Disabled="true" Style="max-width: 100%;" />
    <FluentTextInput Label="Age:" @bind-Value="@Person.Age" Style="max-width: 100%;" />

    <FluentPaginator State="@pagination" SummaryTemplate="@template" />

    <FluentDataGrid Items="@people" Pagination="@pagination">
        <PropertyColumn Property="@(p => p.PersonId)" Sortable="true" />
        <PropertyColumn Property="@(p => p.Name)" Sortable="true" />
        <PropertyColumn Property="@(p => p.BirthDate)" Format="yyyy-MM-dd" Sortable="true" />
    </FluentDataGrid>

    <FluentPaginator State="@pagination" />

</FluentDialogBody>
@code {
    PaginationState pagination = new PaginationState() { ItemsPerPage = 2 };

    record Person2(int PersonId, string Name, DateOnly BirthDate);

    IQueryable<Person2> people = new[]
    {
        new Person2(10895, "Jean Martin", new DateOnly(1985, 3, 16)),
        new Person2(10944, "António Langa", new DateOnly(1991, 12, 1)),
        new Person2(11203, "Julie Smith", new DateOnly(1958, 10, 10)),
        new Person2(11205, "Nur Sari", new DateOnly(1922, 4, 27)),
        new Person2(11898, "Jose Hernandez", new DateOnly(2011, 5, 3)),
        new Person2(12130, "Kenji Sato", new DateOnly(2004, 1, 9)),
    }.AsQueryable();

    private RenderFragment template = @<span />;
}
@code {
    // A simple type is not updatable
    [Parameter]
    public string? Name { get; set; }

    // A class is updatable
    [Parameter]
    public PersonDetails Person { get; set; } = new();

    // Initialize the dialog
    protected override void OnInitializeDialog(DialogOptionsHeader header, DialogOptionsFooter footer)
    {
        header.Title = $"Dialog Title - {Name}";
        footer.SecondaryAction.Visible = true;
    }

    // Handle the action click
    protected override async Task OnActionClickedAsync(bool primary)
    {
        if (primary)
        {
            await DialogInstance.CloseAsync("Yes");
        }
        else
        {
            await DialogInstance.CancelAsync();
        }
    }
}

Then open the Drawer demo and open the drawer. Try to tab through the FluentDataGridin the drawer or try to select text and copy via CTRL+C

🤔 Expected Behavior

I expect the keyboard events to work properly just like when the FluentDataGrid is being used on a normal page.

😯 Current Behavior

Almost every keyboard feature is not working anymore. You can Tab through the first two headers though.

💁 Possible Solution

🔦 Context

🌍 Your Environment

• OS & Device: Windows 11 64 Bit
• Browser Latest Firefox and Edge
• .NET 10 and latest dev-v5 branch