Modal closing issue

Describe the bug

If I have a modal displayed on my current page & an event is triggered in my application causing a redirection to another page, the modal is still displayed even though the _visible boolean is set to false & DestroyOnClose is set to modal, the dispose method is correctly called & boolean is correctly set to false. Small example is provided below.

Steps to reproduce (please include code)

Modal.razor :

@implements IDisposable


<Modal DestroyOnClose Style="width:50%;" Visible="_showPasswordModal" OnCancel="()=>_showPasswordModal=false" >
                <TitleTemplate>
                    <h3 >test</h3>
                </TitleTemplate>
 </Modal >

   
@code{
public override void Dispose(){
    _showPasswordModal=false;
     base.Dispose();
}
} 

App.razor

private Timer? _timerRedirect;
protected async override Task OnInitializedAsync()
 {
  
     _timerRedirect = new Timer( 2000 );
     _timerRedirect.Elapsed += UpdateTimerRedirect;
   
     _timerRedirect.AutoReset = false;
 
     await base.OnInitializedAsync();

 }
     
private async void UpdateTimerRedirect( Object? source, ElapsedEventArgs e )
 {

             Navigation.NavigateTo( "/");

 }

Exceptions (if any)

None

Further technical details

• AntDesign Nuget Package version 15.4
• Include the output of dotnet --info .net 6/7

[zxyao145]

@quirynen Get it, Modal cannot be wrapped by HTML native elements, because the lifecycle of HTML native elements is not managed by Blazor.

If you have a Div.razor component below (no need to implement IDisposable):

@ChildContent

@code
{
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

This will work well:

<Div>
    <Modal DestroyOnClose Style="width:50%;" Visible="_showPasswordModal" OnCancel="()=>_showPasswordModal=false">
        <TitleTemplate>
            <h3>test</h3>
        </TitleTemplate>
        <ChildContent>
            <a href="/counter">link</a>
        </ChildContent>
    </Modal>
</Div>

In fact, wrapping Modal with div is meaningless, because Modal will be extracted into the body after being rendered.

Next, I will try to improve this issue. Before that, please do not use the native HTML native wrapping Modal component.

[quirynen]

Ok thanks for the feedback, maybe it’d be a good idea to mention it in the documentation if someone encountered this issue in the future