ant-design/ant-design

Modal 下 destroyOnClose 属性 失效

Open

#28,847 opened on Jan 13, 2021

View on GitHub
 (5 comments) (2 reactions) (0 assignees)TypeScript (98,031 stars) (54,612 forks)batch import
Inactivehelp wanted🐛 Bug

Description

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://fvrw0.csb.app/

Steps to reproduce

modal下使用video标签，播放后，关闭modal video or audio标签依然播放， 且重新打开modal 依然存在

What is expected?

modal关闭后销毁媒体标签

What is actually happening?

modal关闭后未销毁标签

Environment Info
antd 4.10.2
React 16.12.0
System win10
Browser firefox

Contributor guide

Tech stack
typescriptreacthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Reactantd Modal componentcomponent lifecycle
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
30
Research direction
The issue is that the Modal's destroyOnClose prop does not destroy media elements (like video) when the modal closes. Investigate the Modal component in the antd repository, likely in components/modal/Modal.tsx, to understand how destroyOnClose is implemented. Check if the issue is related to React's unmounting behavior or conditional rendering. The reproduction link shows the problem, so replicate it. Look at the component's state management and ensure that when destroyOnClose is true, the child components are properly unmounted (e.g., using a key prop or conditional rendering). Also check if there are any existing comments or maintainer responses that hint at a solution.