Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal get hangs when Close

See original GitHub issue

Describe the bug

I have a list of fruits using AntList and a Remove button each list item. When clicking Remove button the modal shown. If I click OK, item will be removed from list and close modal button.

The problem is that when I click OK, the modal don’t close but hang all page.

Steps to reproduce (please include code)

Project: AntDesignSample-ModalBugs.zip

Click remove button
Then click OK
The page hangs and I cannot click anything

Exceptions (if any)

I see no exception

Further technical details

AntDesign: 0.6.0
Include the output of dotnet --info

.NET SDK (reflecting any global.json): Version: 5.0.103 Commit: 72dec52dbd

Runtime Environment: OS Name: Windows OS Version: 10.0.19042 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\5.0.103\

Host (useful for support): Version: 5.0.3 Commit: c636bbdc8a

.NET SDKs installed: 2.2.207 [C:\Program Files\dotnet\sdk] 3.1.404 [C:\Program Files\dotnet\sdk] 5.0.103 [C:\Program Files\dotnet\sdk]

.NET runtimes installed: Microsoft.AspNetCore.All 2.1.25 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.All 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.App 2.1.25 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.1.12 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 2.1.25 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 2.2.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.1.12 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.1.10 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 3.1.12 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App] Microsoft.WindowsDesktop.App 5.0.3 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

The IDE: Visual Studio 2019 16.8.559

Issue Analytics

State:
Created 3 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

cephaspadcommented, Feb 25, 2021

Thank @zxyao145 !!! It works like a charm, now. I am trying study something from it.

Have a nice day, guy !!!

1reaction

zxyao145commented, Feb 25, 2021

Hi @cephaspad

The reason for this bug is that when ListItem is rerendered (invoke OnFinished in FruitRemovalModalButton.razor), the pop-up Modal Dialog has not been destroyed, but the mounted DOM has changed, and the destroy event cannot be continued.

In order to solve this problem, you can choose to execute OnFinished in the AfterClose callback of Modal, or promote Modal to out of AntList.

The code to use AfterClose is similar to the following (Don’t forget to remove OnFinished from OnOk):

<Modal 
       ...

       AfterClose="async ()=>{
            if (OnFinished.HasDelegate)
            {
                await OnFinished.InvokeAsync();
            }
       }"

       >

       ...

</Modal>