From 4ebfe2ecc72d4967178659d41de379e1206af6cf 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             |  5 ++++-
 .../useBodyFixOnModalClose/useBodyFixOnModalClose.ts   | 10 ++++++++++
 src/form/ModalPicker/ModalPicker.tsx                   |  5 ++++-
 3 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 src/core/useBodyFixOnModalClose/useBodyFixOnModalClose.ts

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