fix: stable modal

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Chrome",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}/src",
+      "sourceMapPathOverrides": {
+        "webpack:///src/*": "${webRoot}/*"
+      }
+    }
+  ]
+}

package.json

@@ -10,6 +10,7 @@
     "email": "[email protected]"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.8",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -18,8 +19,9 @@
     "@types/node": "^16.18.3",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
-    "bootstrap": "^5.2.1",
+    "bootstrap": "^5.3.3",
     "lodash": "^4.17.21",
+    "popper": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
@@ -56,6 +58,7 @@
     ]
   },
   "devDependencies": {
+    "@types/bootstrap": "^5.2.10",
     "@types/react-helmet": "^6.1.6",
     "gh-pages": "^4.0.0"
   },
@@ -78,4 +81,4 @@
   "bugs": {
     "url": "https://github.com/owner/project/issues"
   }
-}
+}

src/components/input/inputSection.tsx

@@ -20,8 +20,10 @@ export const InputSection: React.FC<props> = () => {
 
   const updateContextDelay = 897; //milliseconds
   const setFilterDebounced = useCallback(
-    debounce(filterContext.setFilter, updateContextDelay),
-    [filterContext]
+    debounce((filter) => {
+      filterContext.setFilter(filter);
+    }, updateContextDelay),
+    [filterContext, updateContextDelay]
   );
 
   const handleFilter = (filterName: keyof IDataFilter) => {

src/components/modal/modal.tsx

@@ -1,50 +1,58 @@
 import React from "react";
-import "bootstrap/dist/css/bootstrap.min.css";
 import ModalContent from "./modalContent";
 import { DataRepresentation } from "data";
+
 interface ModalProps {
   show: boolean;
   handleClose: () => void;
   rowData: DataRepresentation | null;
 }
 
 const CustomModal: React.FC<ModalProps> = ({ show, handleClose, rowData }) => {
-  if (!show) {
-    return null;
-  }
-  if (!rowData) {
-    return null;
-  }
+  if (!show || !rowData) return null;
+
   return (
     <div
-      className="
-      modal 
-      fade
-      show 
-      d-block
-      bg-dark-transparent"
+      className="modal fade show"
+      id="exampleModal"
       tabIndex={-1}
-      role="dialog"
+      // aria-labelledby="exampleModalLabel"
+      // aria-hidden="true"
+      style={{
+        display: "block",
+        backgroundColor: "rgba(0, 0, 0, 0.3)",
+        backdropFilter: "blur(0.3em)",
+      }}
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
       onClick={handleClose}
     >
       <div
-        className="modal-dialog card"
+        className="modal-dialog card shadow shadow-lg"
         role="document"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className=" card-body fade-scale">
+        <div className="modal-content ">
           <div className="modal-header">
-            <h3 className="modal-title ">
-              <strong>{`${rowData.standard} ${rowData.code}`} Detail</strong>
-            </h3>
+            <h2
+              className="modal-title text-center"
+              id="exampleModalLabel"
+              style={{
+                margin: "0 auto",
+              }}
+            >
+              <strong>{`${rowData.standard} ${rowData.code}`}</strong>
+            </h2>
           </div>
+
           <div className="modal-body">
-            <ModalContent oringData={rowData} />
+            <ModalContent ringDimensions={rowData} />
           </div>
           <div className="modal-footer">
             <button
               type="button"
               className="btn btn-secondary"
+              data-bs-dismiss="modal"
               onClick={handleClose}
             >
               Close