regalijan/car-crushers-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix clipboard event multi-firing after closing and reopening modal

Browse Source
This commit is contained in:
regalijan 2023-10-19 16:49:37 -04:00
parent 1994a5ee5e
commit 120ca1da45
Signed by: regalijan
GPG Key ID: 5D4196DA269EF520
1 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/NewInfractionModal.tsx
View File

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