Description
When the FileDrop component has many children, dragging a file between the children causes it to rapidly flash between having the file-drop-dragging-over-target class, and not having that class. When CSS styling for the two states are very different (say, the colors are inverted), this results in a visible "flicker" in some browsers (such as Debian 10/Chromium).
Example setup:
<FileDrop
onDragLeave={() => console.log("foobar")}
>
<label
for={id}
>
<SomeIcon />
<div>
<div>Some Title</div>
<div>Some file name display</div>
</div>
</label>
<input
id={id}
type={"file"}
/>
</FileDrop>
If you run a dragged file within the FileDrop, but in between different children, you can see foobar being logged repeatedly to console. You could also flesh out this example with contrasting styles to see the visual flicker.
(Incidentally, I believe this is the root cause of #60.)
This appears to be due to this code:
handleDragLeave: ReactDragEventHandler<HTMLDivElement> = (event) => {
this.setState({ draggingOverTarget: false });
if (this.props.onDragLeave) this.props.onDragLeave(event);
};
This will fire whenever a dragLeave event bubbles up from children of FileDrop. Of course, the corresponding dragEnter event bubbles up shortly afterward, but this brief period of draggingOverTarget: false state causes a visual flicker.
Attempts to mitigate this by putting event.stopPropagation(); on children seem to break part of the state, resulting in the possibility of leaving the FileDrop stuck in a state where it thinks the file is still being dragged over the target or the frame, even after it's not.
The best way I've found to mitigate this problem is to have my CSS run a transition animation between states so that the flicker doesn't show as much.
It would be nice if FileDrop didn't flicker due to bubbling DragLeave events. Currently, by my testing, this affects Debian 10/Chromium, but not Debian 10/Firefox. I haven't been able to test it on other mainstream browsers.