diff --git a/components/modal/__tests__/hook.test.tsx b/components/modal/__tests__/hook.test.tsx index 16edbe4ac9..c4b5ff77da 100644 --- a/components/modal/__tests__/hook.test.tsx +++ b/components/modal/__tests__/hook.test.tsx @@ -72,6 +72,43 @@ describe('Modal.hook', () => { jest.useRealTimers(); }); + it('destroyAll works with contextHolder', () => { + const modalTypes = ['info', 'success', 'warning', 'error'] as const; + + const Demo = () => { + const [modal, contextHolder] = Modal.useModal(); + + function showConfirm() { + modalTypes.forEach((type) => { + modal[type]({ + title: 'title', + content: 'content', + }); + }); + } + + return ( +
+ {contextHolder} +
+ confirm +
+
+ ); + }; + + const { container } = render(); + fireEvent.click(container.querySelectorAll('.open-hook-modal-btn')[0]); + + expect(document.body.querySelectorAll('.ant-modal')).toHaveLength(modalTypes.length); + + // Update instance + act(() => { + Modal.destroyAll(); + }); + expect(document.body.querySelectorAll('.ant-modal')).toHaveLength(0); + }); + it('context support config direction', () => { jest.useFakeTimers(); const Demo = () => { diff --git a/components/modal/destroyFns.ts b/components/modal/destroyFns.ts index 61d1d8a9a2..eaf13e4939 100644 --- a/components/modal/destroyFns.ts +++ b/components/modal/destroyFns.ts @@ -1,2 +1,2 @@ -const destroyFns: Array<() => void> = []; +const destroyFns: Array = []; export default destroyFns; diff --git a/components/modal/useModal/index.tsx b/components/modal/useModal/index.tsx index 1d89750889..ce4b1e55a8 100644 --- a/components/modal/useModal/index.tsx +++ b/components/modal/useModal/index.tsx @@ -5,6 +5,7 @@ import { withConfirm, withError, withInfo, withSuccess, withWarn } from '../conf import type { ModalFuncProps } from '../Modal'; import type { HookModalRef } from './HookModal'; import HookModal from './HookModal'; +import destroyFns from '../destroyFns'; let uuid = 0; @@ -69,6 +70,10 @@ function useModal(): readonly [ closeFunc = holderRef.current?.patchElement(modal); + if (closeFunc) { + destroyFns.push(closeFunc); + } + return { destroy: () => { function destroyAction() {