Remove .bodyModalOpen class when Modal unmounts to allow body scroll

ifmeorg · Jul 7, 2024 · 17e71f7 · 17e71f7
1 parent 6120eff
commit 17e71f7
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git 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
@@ -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',
+      );
     });
   });