diff --git a/src/Portal.tsx b/src/Portal.tsx index f947770..5831805 100644 --- a/src/Portal.tsx +++ b/src/Portal.tsx @@ -28,10 +28,7 @@ const ModalPortal: React.FC = ({ id, parentSelector, children }) => { useEffect(() => { getParent().appendChild(node); return () => { - const lastParent = getParent(); - if (lastParent.contains(node)) { - lastParent.removeChild(node); - } + getParent().removeChild(node); }; }, []); diff --git a/test/react-micro-modal.spec.tsx b/test/react-micro-modal.spec.tsx index 4077c0c..353a45c 100644 --- a/test/react-micro-modal.spec.tsx +++ b/test/react-micro-modal.spec.tsx @@ -32,7 +32,7 @@ describe('Micro modal', () => { describe('Nested modal', () => { it('Should open and close nested modals on triggers', () => { - const { getByTestId, getByText } = render( + const { getByTestId, getByText, unmount } = render(
Open modal
}> {handleClose => ( { getByText('Open modal').click(); }); + expect(document.body.querySelector('.nested-micro-modal-portal')).toBeTruthy(); + const nestedModalWrapper = getByTestId('nested-micro-modal'); expectModalIsOpen(modalWrapper); expectModalIsClosed(nestedModalWrapper); @@ -71,70 +73,91 @@ describe('Micro modal', () => { getByText('Close modal').click(); expectModalIsClosed(modalWrapper); expectModalIsClosed(nestedModalWrapper); + + // we clean nested modal after ourselves + expect(document.body.querySelector('.nested-micro-modal-portal')).toBeNull(); + + unmount(); }); }); MODAL_FIXTURES.forEach(({ description, ModalComponent }) => { describe(description, () => { it('Should apply correct classnames and attributes on modal toggle', () => { - modalShouldApplyCorrectClassNamesOnOpenToggle(render()); + const renderResult = render(); + modalShouldApplyCorrectClassNamesOnOpenToggle(renderResult); + renderResult.unmount(); }); it('Open modal should close on escape key press', () => { - openModalShouldCloseOnEscapeKeyPress(render()); + const renderResult = render(); + openModalShouldCloseOnEscapeKeyPress(renderResult); + renderResult.unmount(); }); it('Open modal should close on document click', () => { - openModalShouldCloseOnDocumentClick(render()); + const renderResult = render(); + openModalShouldCloseOnDocumentClick(renderResult); + renderResult.unmount(); }); it('Open modal should not close on escape key press', () => { - openModalShouldNotCloseOnEscapeKeyPress( - render(), - ); + const renderResult = render(); + openModalShouldNotCloseOnEscapeKeyPress(renderResult); + renderResult.unmount(); }); it('Open modal should not close on document click', () => { - openModalshouldNotCloseOnDocumentClick( - render(), - ); + const renderResult = render(); + openModalshouldNotCloseOnDocumentClick(renderResult); + renderResult.unmount(); }); it('Should focus first focusable element on open', () => { - shouldFocusFirstFocusableElementOnModalOpen(render()); + const renderResult = render(); + shouldFocusFirstFocusableElementOnModalOpen(renderResult); + renderResult.unmount(); }); it('Should focus previous element on shift+tab click', () => { - shouldFocusPreviousElementOnShiftAndTabClick(render()); + const renderResult = render(); + shouldFocusPreviousElementOnShiftAndTabClick(renderResult); + renderResult.unmount(); }); it('Should focus first focusable element on tab press if focus is lost', () => { - shouldFocusFirstFocusableElementOnTabPressIfFocusIsLost(render()); + const renderResult = render(); + shouldFocusFirstFocusableElementOnTabPressIfFocusIsLost(renderResult); + renderResult.unmount(); }); it('Open modal should close after closing animation ends', () => { - shouldCloseAfterClosingAnimationEnds(render()); + const renderResult = render(); + shouldCloseAfterClosingAnimationEnds(renderResult); + renderResult.unmount(); }); it('Should be initially open with first element focues', () => { - shouldBeInitiallyOpenWithFocusedElement(render()); + const renderResult = render(); + shouldBeInitiallyOpenWithFocusedElement(renderResult); + renderResult.unmount(); }); it('Should not focus first element when focus disabled', () => { - shouldNotFocusFirstElementOnDisableFocus( - render(), - ); + const renderResult = render(); + shouldNotFocusFirstElementOnDisableFocus(renderResult); + renderResult.unmount(); }); it('Should be able to apply custom className to modal', () => { - shouldBeAbleToApplyCustomClassName( - render( - , - ), + const renderResult = render( + , ); + shouldBeAbleToApplyCustomClassName(renderResult); + renderResult.unmount(); }); }); });