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

@@ -1,4 +1,4 @@
-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';
@@ -73,6 +73,13 @@ export function OpenCloseModal(props: Props) {
     className
   } = props;
 
+  /* istanbul ignore next */
+  useEffect(() => {
+    if (!isOpen) {
+      document.querySelector('body')?.classList.remove('modal-open');
+    }
+  }, [isOpen]);
+
   return (
     <Modal
       isOpen={isOpen}

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,
@@ -118,6 +118,13 @@ export default function ModalPicker(props: Props) {
 
   const shouldRenderPagination = !(page.first && page.last);
 
+  /* istanbul ignore next */
+  useEffect(() => {
+    if (!isOpen) {
+      document.querySelector('body')?.classList.remove('modal-open');
+    }
+  }, [isOpen]);
+
   return (
     <Modal isOpen={isOpen} toggle={() => closeModal()}>
       <ModalHeader toggle={() => closeModal()}>{placeholder}</ModalHeader>