Using FluentUI2: Unable to change Modal size

[stsrki]

Discussed in #5450

^{Originally posted by DomenicoFormoso April 10, 2024}
In version 1.5.1 of FluentUI I found the same problem found on material and then solved here:
#5063

[stsrki]

@David-Moreira, I need your help with this one. For some reason, when the ModalProvider passes the Size parameter to the ModalContent, which is used by the Fluent provider, it seems to never change after that. I cannot figure out what is wrong.

[David-Moreira]

@David-Moreira, I need your help with this one. For some reason, when the ModalProvider passes the Size parameter to the ModalContent, which is used by the Fluent provider, it seems to never change after that. I cannot figure out what is wrong.

hmm do you have a branch open with the attempt?

[stsrki]

I just did this in the demo

public async Task ShowStateful()
{
    if ( statefulModalInstance is null )
    {
        statefulModalInstance = await ModalService.Show<Counter>( "My Stateful content", new ModalInstanceOptions()
        {
            Stateful = true,
            RenderMode = ModalRenderMode.LazyLoad,
+            Size = ModalSize.ExtraLarge,
        } );

        return;
    }

    await ModalService.Show( statefulModalInstance );
}

[David-Moreira]

Strange I believe I've seen that work. Is it happening provider specifically?

[stsrki]

Yes. For the Fluent provider, I had to propagate the Size from ModalContent to the Modal parent component.

[David-Moreira]

It seems like the custom handlers in FluentUI to propagate the Size from ModalContent to the Modal parent component only propagate on an actual change.
Since the ModalProvider renders on demand, the Size parameter will already start defined as Extra Large and will not be detected as a change.

I added the OnInitialized with similar code and it seems to work properly. Can you verify?

protected override void OnInitialized()
    {
        if ( ParentModal is FluentUI2.Components.Modal fluentModal )
        {
//EDIT: Maybe adding a Size != Default on initialization would be okay to avoid running this code on defaults.
            fluentModal.NotifyModalSizeChanged( Size );
            fluentModal.NotifyModalCenteredChanged( Centered );
        }

        base.OnInitialized();
    }

[stsrki]

It still doesn't work as expected. It remembers the last size and shows XL for all opened modal instances If you go to the demo tests/modal-provider, and update

public async Task ShowStateful()
{
    if ( statefulModalInstance is null )
    {
        statefulModalInstance = await ModalService.Show<Counter>( "My Stateful content", new ModalInstanceOptions()
        {
            Stateful = true,
            RenderMode = ModalRenderMode.LazyLoad,
            Size = ModalSize.ExtraLarge,
        } );

        return;
    }

    await ModalService.Show( statefulModalInstance );
}

launch and click on

Now click on any other demo and it will still show as XL modal.