Dropzone flickering when dropping files

[rodrigoyoshida]

The dropzone area flickers when I am dropping files, like it was being disabled and enabled again very quickly, causing the browser to open the local image instead of uploading it if I drop the file in the exact moment it was disabled. It happens on my app and on the demo app. I created a GIF to demonstrate the issue.

[ttill]

I also experience this using Chromium and Chrome (both (73.0.x). Does not appear in Firefox (66.0.3) though.

[ttill]

Both in Firefox and Chromium dragleave is fired when dragging over child-elements of the dropzone (dragenter is fired immediately afterwards again). Looks like the bug is somehow linked to this, because applying pointer-events: none; to all dropzone children, fixes the bug.

Strange thing is that the flickering does not always occur when dragging above a child-element. I was not able to figure out a movement that consistently produces this behaviour.

[beanshearer]

I have also experienced this but applying pointer-events: none; to all of the dropdown children did not fix this

[jelhan]

A reproduction as an Ember Twiddle would be helpful. Does someone has the time to set one up?

@beanshearer I had a quick look in your commit https://github.com/beanshearer/ember-file-upload/commit/7b7bd94848247831713166c09b6fdbfb72d2b683. Do I get it right that dragenter and dragleave are also called for child elements and bubble to this one? If so, did you considered having a check in dragleave event handler to ignore events fired by child elements? Something like:

if (event.target !== this.element) {
  // ignore events fired for child elements
  return;
}

[joshuaswift]

@jelhan We tried ignoring events for the child elements in the fork @beanshearer made but no change unfortunately, we still get the flickering.

[bmaehr]

@ttill Thanks for the hint!
pointer-events: none; by css on all childs of the {{#file-dropzone ... }} fixed it.

Additionally make sure the div <div class='dropzone' id={{dropzone.id}}> is not getting smaller while dropping, otherwise you will get also filckering.

[gilest]

Should be fixed in 5.0.0-beta.8. Please reopen if not