fix: modal-open class remains on body after modal closed

The modal-open class remains on the body tag even after the modal is
closed. This is an issue of the reactstrap library
(reactstrap/reactstrap#1323) which is already
fixed buy not released yet.

Added a temporary work-around to remove the modal-open class when modal
is closed.

Closes #426

src/core/OpenCloseModal/OpenCloseModal.tsx

@@ -3,6 +3,7 @@ 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 (
     <Modal
       isOpen={isOpen}

src/core/useBodyFixOnModalClose/useBodyFixOnModalClose.ts

@@ -0,0 +1,10 @@
+/* istanbul ignore file */
+import { useEffect } from 'react';
+
+export function useBodyFixOnModalClose(isOpen: boolean) {
+  useEffect(() => {
+    if (!isOpen) {
+      document.querySelector('body')?.classList.remove('modal-open');
+    }
+  }, [isOpen]);
+}

src/form/ModalPicker/ModalPicker.tsx

@@ -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 (