Fix clipboard event multi-firing after closing and reopening modal

components/NewInfractionModal.tsx

@@ -14,7 +14,7 @@ import {
 } from "@chakra-ui/react";
 
 export default function (props: { isOpen: boolean; onClose: () => void }) {
-  addEventListener("paste", (e) => {
+  function pasteHandler(e: ClipboardEvent) {
     if (!props.isOpen) return;
 
     const evidenceElement = document.getElementById(
@@ -38,14 +38,17 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
     dataTransfer.items.add(e.clipboardData.files[0]);
 
     evidenceElement.files = dataTransfer.files;
-  });
+  }
+
+  addEventListener("paste", pasteHandler);
 
   function reset() {
+    removeEventListener("paste", pasteHandler);
     (
       document.getElementById("punishment") as unknown as HTMLSelectElement
     ).selectedIndex = -1;
     (document.getElementById("user") as HTMLInputElement).value = "";
-    (document.getElementById("evidence") as HTMLInputElement).value = "";
+    (document.getElementById("evidence") as HTMLInputElement).files = null;
 
     props.onClose();
   }
@@ -96,7 +99,13 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
   }
 
   return (
-    <Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
+    <Modal
+      closeOnEsc={false}
+      closeOnOverlayClick={false}
+      isCentered
+      isOpen={props.isOpen}
+      onClose={props.onClose}
+    >
       <ModalOverlay />
       <ModalContent>
         <ModalHeader>New Infraction</ModalHeader>
@@ -118,7 +127,10 @@ export default function (props: { isOpen: boolean; onClose: () => void }) {
           <br />
           <br />
           <Text>Evidence</Text>
-          <Button onClick={() => document.getElementById("evidence")?.click()}>
+          <Button
+            onClick={() => document.getElementById("evidence")?.click()}
+            mr="8px"
+          >
             Select Files
           </Button>
           <input id="evidence" multiple type="file" />