diff --git a/src/core/OpenCloseModal/OpenCloseModal.tsx b/src/core/OpenCloseModal/OpenCloseModal.tsx index c19fa493b..5873dada4 100644 --- a/src/core/OpenCloseModal/OpenCloseModal.tsx +++ b/src/core/OpenCloseModal/OpenCloseModal.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap'; import Button from '../Button/Button'; import { t } from '../../utilities/translation/translation'; import { BootstrapSize } from '../types'; +import { useBodyFixOnModalClose } from '../useBodyFixOnModalClose/useBodyFixOnModalClose'; type Text = { cancel?: string; @@ -73,6 +74,8 @@ export function OpenCloseModal(props: Props) { className } = props; + useBodyFixOnModalClose(isOpen); + return ( { + if (!isOpen) { + document.querySelector('body')?.classList.remove('modal-open'); + } + }, [isOpen]); +} diff --git a/src/form/ModalPicker/ModalPicker.tsx b/src/form/ModalPicker/ModalPicker.tsx index bb68678f5..944181819 100644 --- a/src/form/ModalPicker/ModalPicker.tsx +++ b/src/form/ModalPicker/ModalPicker.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Page } from '@42.nl/spring-connect'; import { Modal, @@ -13,6 +13,7 @@ import { import Pagination from '../../core/Pagination/Pagination'; import { t } from '../../utilities/translation/translation'; import SearchInput from '../../core/SearchInput/SearchInput'; +import { useBodyFixOnModalClose } from '../../core/useBodyFixOnModalClose/useBodyFixOnModalClose'; interface Text { placeholder?: string; @@ -116,6 +117,8 @@ export default function ModalPicker(props: Props) { text = {} } = props; + useBodyFixOnModalClose(isOpen); + const shouldRenderPagination = !(page.first && page.last); return (