From 17e71f7f8ce512dc2dbe51c8ff23d3f31a277977 Mon Sep 17 00:00:00 2001
From: Julia Nguyen <tojulianguyen@gmail.com>
Date: Sun, 7 Jul 2024 09:32:42 -0700
Subject: [PATCH] Remove .bodyModalOpen class when Modal unmounts to allow body
 scroll

---
 client/app/components/Modal/index.jsx     | 11 ++++++++++-
 client/app/utils/__tests__/index.spec.jsx | 16 ++++++++++++----
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/client/app/components/Modal/index.jsx b/client/app/components/Modal/index.jsx
index 0c16b474aa..7ee1c0bdbf 100644
--- a/client/app/components/Modal/index.jsx
+++ b/client/app/components/Modal/index.jsx
@@ -1,6 +1,10 @@
 // @flow
 import React, {
-  useState, useRef, type Element, type Node,
+  useState,
+  useRef,
+  type Element,
+  type Node,
+  useEffect,
 } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
@@ -64,6 +68,11 @@ export const Modal = (props: Props): Node => {
 
   useFocusTrap(modalEl, open);
 
+  useEffect(() => () => {
+    const documentBody = ((document.body: any): HTMLBodyElement);
+    documentBody.classList.remove('bodyModalOpen');
+  }, []);
+
   const handleKeyPress = (
     event: SyntheticKeyboardEvent<HTMLDivElement>,
     keyName: string,
diff --git a/client/app/utils/__tests__/index.spec.jsx b/client/app/utils/__tests__/index.spec.jsx
index 1a26ae7d5c..76dd5a7bae 100644
--- a/client/app/utils/__tests__/index.spec.jsx
+++ b/client/app/utils/__tests__/index.spec.jsx
@@ -19,7 +19,9 @@ describe('Utils', () => {
       metaElementTwo.setAttribute('name', 'pusher-cluster');
       metaElementTwo.setAttribute('content', 'sample-cluster');
 
-      jest.spyOn(document, 'getElementsByTagName').mockImplementation(() => [metaElementOne, metaElementTwo]);
+      jest
+        .spyOn(document, 'getElementsByTagName')
+        .mockImplementation(() => [metaElementOne, metaElementTwo]);
     });
 
     it('should return null if window.Pusher is not defined', () => {
@@ -30,7 +32,9 @@ describe('Utils', () => {
       window.Pusher = jest.fn();
       const pusher = Utils.getPusher();
       expect(pusher).toBeInstanceOf(window.Pusher);
-      expect(window.Pusher).toHaveBeenCalledWith('sample content', { cluster: 'sample-cluster' });
+      expect(window.Pusher).toHaveBeenCalledWith('sample content', {
+        cluster: 'sample-cluster',
+      });
     });
   });
 
@@ -45,10 +49,14 @@ describe('Utils', () => {
       metaElementOne.setAttribute('name', 'csrf-token');
       metaElementOne.setAttribute('content', 'TOKEN-TEST-VALUE');
 
-      jest.spyOn(document, 'getElementsByTagName').mockImplementation(() => [metaElementOne]);
+      jest
+        .spyOn(document, 'getElementsByTagName')
+        .mockImplementation(() => [metaElementOne]);
 
       Utils.setCsrfToken();
-      expect(axios.defaults.headers.common['X-CSRF-Token']).toBe('TOKEN-TEST-VALUE');
+      expect(axios.defaults.headers.common['X-CSRF-Token']).toBe(
+        'TOKEN-TEST-VALUE',
+      );
     });
   });