From e6a7e2d27c5c29a0f64d9a4eee4b7e6a21459764 Mon Sep 17 00:00:00 2001
From: Gido Manders <gido.manders@42.nl>
Date: Mon, 22 Jun 2020 15:34:04 +0200
Subject: [PATCH] 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
(https://github.com/reactstrap/reactstrap/issues/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 +++
 .../useBodyFixOnModalClose/useBodyFixOnModalClose.ts   | 10 ++++++++++
 src/form/ModalPicker/ModalPicker.tsx                   |  3 +++
 3 files changed, 16 insertions(+)
 create mode 100644 src/core/useBodyFixOnModalClose/useBodyFixOnModalClose.ts

diff --git a/src/core/OpenCloseModal/OpenCloseModal.tsx b/src/core/OpenCloseModal/OpenCloseModal.tsx
index c19fa493b..8c3578df8 100644
--- a/src/core/OpenCloseModal/OpenCloseModal.tsx
+++ b/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}
diff --git a/src/core/useBodyFixOnModalClose/useBodyFixOnModalClose.ts b/src/core/useBodyFixOnModalClose/useBodyFixOnModalClose.ts
new file mode 100644
index 000000000..20570ad66
--- /dev/null
+++ b/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]);
+}
diff --git a/src/form/ModalPicker/ModalPicker.tsx b/src/form/ModalPicker/ModalPicker.tsx
index bb68678f5..65ac1e4ac 100644
--- a/src/form/ModalPicker/ModalPicker.tsx
+++ b/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 (