🐛 fix Windows bug with the admin file upload widget (#21687)

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.
This commit is contained in:
Cathy Sarisky 2024-11-22 18:21:00 -05:00 committed by GitHub
parent 2016e6a6df
commit ebd98d005a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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` : ''}>