FileDrop flickers due to className changes when dragging file over complex FileDrop

[chylu]

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.

[chylu]

A related issue: If you hover a file over just the right place, on a pixel on a child's element border, FileDrop sometimes thinks that the file is not over the target at all. (ETA: This happens in Debian 10/Chromium but not Debian 10/Firefox.)

[sarink]

For future readers: This is a known and open issue. For most use cases, it isn't an issue, but if you are experiencing this problem, the best advice (for now) is to simplify/flatten the markup in the FileDrop tree.

I have a few ideas for a fix, but it's... complicated, and I likely won't have time to test and publish it for quite awhile. PRs always welcome though! ;)