fix: Forced focus in secondary Dialog

[Ditchboo]

🐛 Bug Report

First apologies if I'm just doing something unsupported or wrong. My intention is to have a Dialog appear, which then allows the user to open a Panel - this appears to work as expected but an issue arises in the panel which has a FluentAutocomplete which effectively constantly steals focus. I see the following in the debug output window:

Uncaught RangeError RangeError: Maximum call stack size exceeded.
    at focusFirstElement (c:\Users\dan\.nuget\packages\microsoft.fluentui.aspnetcore.components\4.4.2-preview.24060.3\node_modules\@fluentui\web-components\dist\web-components.js:11443:19)
    at handleDocumentFocus (c:\Users\dan\.nuget\packages\microsoft.fluentui.aspnetcore.components\4.4.2-preview.24060.3\node_modules\@fluentui\web-components\dist\web-components.js:11406:14)

The following image illustrates the intended journey:

This is project created with .NET 8 and the "Fluent Blazor WebAssembly Standalone App" template, same behaviour in debug/release. My Microsoft.FluentUI.AspNetCore.Components version is 4.4.2-preview.24060.3

💻 Repro or Code Sample

There is quick example of this behaviour here: https://github.com/Ditchboo/FluentAutocompleteTest

🤔 Expected Behavior

If this is actually supported/I've not done something silly 😬 I'd expect to be able to:

1. Launch a dialog
2. Launch another dialog from the original dialog instance
3. Use a FluentTextField and other Fluent form components in the active dialog/panel without FluentAutocomplete stealing focus

😯 Current Behavior

As described above.

💁 Possible Solution

My experience is a bit limited with this but I'm happy to try and help with a fix, will need pointing in the right direction.

🌍 Your Environment

Windows 11 Home .NET 8.2 w/ components 4.4.2-preview.24060.3 Chrome 122.0.6261.95 (Official Build) (64-bit)

[vnbaaij]

Hi,

We have not developed or tested dialogs to 'stack' but it might still work. Do you see the same behavior when you only use the Panel? Perhaps you can set the autofocus attribute on the AutoComplete to false (might need some js for that).

I'm closing this one as it is not a supported scenario. If you run into the same issue with just the Panel, let us know here and I will re-open.

[Ditchboo]

Thank you for the response, I don't see the same issue with just a Panel - as this isn't a supported scenario I'll just rejig the journey a little ☺️.

[pmi24]

I'm currently running into the same issue (opening a dialog from within a dialog / panel from within a panel). Here's a short snipped on how to reproduce:

Home.razor:

<h1>Hello, world!</h1>
<p>Welcome to your new Fluent Blazor app</p>

<MyModal />
<FluentDialogProvider />

MyModal.razor:

@implements IDialogContentComponent<int>

<h3>MyModal</h3>
<p>You are on level @Content</p>

<FluentTextField Autofocus="false" Placeholder="Can you type something?" />
<FluentButton OnClick="GoDeeper">Go deeper!</FluentButton>

@code {
    [Inject]
    IDialogService DialogService { get; set; }

    [Parameter]
    public int Content { get; set; }

    public async Task GoDeeper()
    {
        var parameters = new DialogParameters()
        {
            TrapFocus = true,
            Modal = true,
        };

        var nextLevel = Content + 1;

        Console.WriteLine($"Opening modal on level {nextLevel}!");

        var dialog = await DialogService.ShowDialogAsync<MyModal>(nextLevel, parameters);
        // or ShowPanelAsync
    }
}

Are there any plans to support this in the future? Or maybe just to add a workaround to disable the focusFirstElement() recursion?

[vnbaaij]

No, there are no plans to support this as it goes against the Fluent Design guidelines