From ebd98d005acf1b04b737e50601c71dc3020490fa Mon Sep 17 00:00:00 2001
From: Cathy Sarisky <42299862+cathysarisky@users.noreply.github.com>
Date: Fri, 22 Nov 2024 18:21:00 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix=20Windows=20bug=20with=20the?=
 =?UTF-8?q?=20admin=20file=20upload=20widget=20(#21687)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

closes #21439

On Windows 10/Chrome (but maybe nowhere else?), attempting to drag a
file into any of the drop targets in the admin panel resulted in
flickering behavior, and generally dropping didn't actually trigger the
upload.

I thought originally it was a problem with the size of the drop target,
but it actually appears to be a rerender bug. In brief, handleDragging
and handleStopDragging were firing repeatedly, and each fire triggered a
rerender, that added or removed a div from the file upload widget.

I suspect some browser-specific difference in how drag events fire is to
blame.

This PR moves the logic to change the classes applied to the div, rather
than changing whether the div is present.

I have manually tested with Windows 10 in the users import, theme
import, and content import widgets. Styles are preserved (although I
think they could be improved, as the grey outline is really faint) and
uploading now works consistently, instead of mostly triggering display
of the raw file most of the time.
---
 apps/admin-x-design-system/src/global/form/FileUpload.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/admin-x-design-system/src/global/form/FileUpload.tsx b/apps/admin-x-design-system/src/global/form/FileUpload.tsx
index 43778f3c7de..02218ab8432 100644
--- a/apps/admin-x-design-system/src/global/form/FileUpload.tsx
+++ b/apps/admin-x-design-system/src/global/form/FileUpload.tsx
@@ -51,7 +51,7 @@ const FileUpload: React.FC<FileUploadProps> = ({id, onUpload, children, style, u
 
     return (
         <label className={clsx('relative', className)} htmlFor={id} style={style} onDragEnter={handleDragging} onDragLeave={handleStopDragging} onDragOver={handleDragging} onDrop={handleDrop} {...props}>
-            {isDragging && <div className={clsx('absolute inset-1 rounded border-2 border-dashed border-grey-400/25', dragIndicatorClassName)} />}
+            <div className={clsx({'absolute inset-1 rounded': true, 'border-2 border-dashed border-grey-400/25': isDragging}, isDragging && [dragIndicatorClassName])} />
             <input key={fileKey} ref={inputRef || null} id={id} type="file" hidden onChange={handleFileChange} />
             {(typeof children === 'string') ?
                 <div className={!unstyled ? `inline-flex h-[34px] cursor-pointer items-center justify-center rounded px-4 text-sm font-semibold hover:bg-grey-100 dark:text-white dark:hover:bg-grey-900` : ''}>