Simplify dropzone overlay to use fixed positioning without portal

Remove createPortal and main element ref/state in favor of a simple
fixed overlay with top-12 offset. This avoids React 19 strict mode
violations around ref access during render and setState in effects.

Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
2026-03-18 23:48:37 +01:00
parent 6eebfa11ef
commit 5c42d2e9ba

View File

@@ -22,8 +22,7 @@ import {
useDialogRef, useDialogRef,
useToast, useToast,
} from "@probo/ui"; } from "@probo/ui";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef } from "react";
import { createPortal } from "react-dom";
import { useDropzone } from "react-dropzone"; import { useDropzone } from "react-dropzone";
import { import {
graphql, graphql,
@@ -190,34 +189,19 @@ export default function AuditsPage(props: Props) {
setDroppedFile(null); setDroppedFile(null);
}; };
const [mainEl, setMainEl] = useState<HTMLElement | null>(null);
useEffect(() => {
const el = document.querySelector("main");
if (el) {
el.style.position = "relative";
setMainEl(el);
}
return () => {
if (el) {
el.style.position = "";
}
};
}, []);
return ( return (
<div className="space-y-6"> <div className="space-y-6">
{isDragging && canCreateAudit && mainEl && createPortal( {isDragging && canCreateAudit && (
<div <div
{...getRootProps()} {...getRootProps()}
className="border-primary bg-primary/5 pointer-events-auto absolute inset-0 z-40 flex flex-col items-center justify-center border-2 border-dashed" className="border-primary bg-primary/5 pointer-events-auto fixed inset-0 top-12 z-40 flex flex-col items-center justify-center border-2 border-dashed"
> >
<input {...getInputProps()} /> <input {...getInputProps()} />
<IconUpload className="text-primary mb-2 size-8" /> <IconUpload className="text-primary mb-2 size-8" />
<p className="text-primary text-sm font-medium"> <p className="text-primary text-sm font-medium">
{__("Drop a PDF to create an audit with a report")} {__("Drop a PDF to create an audit with a report")}
</p> </p>
</div>, </div>
mainEl,
)} )}
<PageHeader <PageHeader
title={__("Audits")} title={__("Audits")}