fix: prevent body scroll when modal is open

Author: nakrovati

webdriver-ts-results/src/components/SelectionToolbar/BenchmarkSelector/BenchmarkSelector.tsx

@@ -1,7 +1,7 @@
 import { BenchmarkType } from "@/Common";
 import BenchmarkSelectorCategory from "./BenchmarkSelectorCategory";
 import { Button, Modal } from "antd";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 const content = (
   <>
@@ -16,6 +16,10 @@ const BenchmarkSelector = () => {
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  useEffect(() => {
+    isModalOpen ? (document.body.style.overflow = "hidden") : document.body.style.removeProperty("overflow");
+  }, [isModalOpen]);
+
   const showModal = () => {
     setIsModalOpen(true);
   };
@@ -33,7 +37,7 @@ const BenchmarkSelector = () => {
       <Button type="primary" onClick={showModal}>
         Which benchmarks?
       </Button>
-      <Modal title="Benchmarks selector" onOk={handleOk} onCancel={handleCancel} open={isModalOpen} footer={null}>
+      <Modal title="Benchmarks selector" footer={null} onOk={handleOk} onCancel={handleCancel} open={isModalOpen}>
         {content}
       </Modal>
     </>

webdriver-ts-results/src/components/SelectionToolbar/FrameworkSelector/FrameworkSelector.tsx

@@ -1,7 +1,7 @@
 import { FrameworkType } from "@/Common";
 import FrameworkSelectorCategory from "./FrameworkSelectorCategory";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Button, Modal } from "antd";
 
 const content = (
@@ -16,6 +16,10 @@ const FrameworkSelector = () => {
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
+  useEffect(() => {
+    isModalOpen ? (document.body.style.overflow = "hidden") : document.body.style.removeProperty("overflow");
+  }, [isModalOpen]);
+
   const showModal = () => {
     setIsModalOpen(true);
   };