React-dnd: Issue with Firefox losing events

Created on 5 Apr 2018 · 7Comments · Source: react-dnd/react-dnd

I have found a pretty nasty bug that appears to be tripping an issue possibly in Firefox itself. I can reproduce this error even on the chess tutorial example. Basically, you can get into a state where Firefox does not appear to send any mouse events except dragstart.

Reproducing

Click on a drag source and start dragging it, release the mouse before the preview appears. In the tutorial example, after you do it once, the drop targets will stay highlighted. You sometimes have to do it immediately again to trigger the full bug.

This is much easier to accomplish on slower pages where the preview takes a while to appear. I have a page that is very slow, and I can reproduce it by releasing the click sometimes even a second after it started dragging.

Symptoms

Once you have triggered the bug, Firefox appears to stop sending drag events other than dragstart to almost every tab. Sometimes I can cause the issue in one page wth react-dnd on it, and then all my other tabs start exhibiting the same symptoms.

There are only two ways to get yourself out of this broken state. First, you can close and reopen the browser. Second, you can initiate a drag on a page where react-dnd is still working. Once you have done this, the page that caused the break will receive a dragend event. So:

Tab 1 sees a clickstart
Tab 1 sees no more events other than clickstart
Open Tab 2 and start dragging
Tab 1 sees a clickend and is now working again

Here is a video showing this odd behaviour using two tabs showing https://react-dnd.github.io/react-dnd/examples-chessboard-tutorial-app.html.

ReactDnDFirefoxBug.zip

I'm on macOS High Sierra 10.13.3 (17D102) with Firefox 59.0.2 (64-bit). It appears to happen on any version >= 57. I have reproduced the error with react-dnd 2.6.0 and 2.5.4.

I would be happy to help with any testing or debugging to either get this fixed, or come up with a workaround if the issue is in Firefox itself.

browser bug bug wontfix

Source

jsteel

👍10

Most helpful comment

Ticket opened with Mozilla here: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

jsteel on 6 Apr 2018

👍3

All 7 comments

I have found a better way to trigger the bug that doesn't even use react-dnd.

Once you have broken the page, the only way I can find to fix it is to move the chess piece on the react-dnd example, or restart Firefox. I'm not sure exactly what the react-dnd example is doing to unstick it, or how to make a workaround for it.

<html>
<head>
</head>
<body>
<p>
  Click and drag the draggable item for longer than 1 second to see it dragging.
  Click, drag, and release within 1 second to cause the error.
</p>

<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

<style>
  #draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
  }
</style>

<script>
  var dragged;

  /* events fired on the draggable target */
  document.addEventListener("drag", function( event ) {
    console.log('drag')
  }, false);

  function sleep(ms){
      var waitTimeInMilliseconds = new Date().getTime() + ms;
      while(new Date().getTime() < waitTimeInMilliseconds ) true;
  }

  document.addEventListener("dragstart", function( event ) {
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      event.target.style.opacity = .5;

      sleep(1000);

      // You can use this approach instead of the sleep. The image is quite
      // large so it's easy to release the mouse before the image is loaded
      // var img = new Image();
      // img.src = 'http://awakeningthegoddesswithin.net/wp/wp-content/uploads/2015/06/moon.jpg';
      // event.dataTransfer.setDragImage(img, 10, 10);
  }, false);

  document.addEventListener("dragend", function( event ) {
    console.log("dragend")
      // reset the transparency
      event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      console.log("dragover")
      // prevent default to allow drop
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      console.log("dragenter")
      // highlight potential drop target when the draggable element enters it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      console.log("dragleave")
      // reset background of potential drop target when the draggable element leaves it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      console.log("drop")
      // prevent default action (open as link for some elements)
      event.preventDefault();
      // move dragged elem to the selected drop target
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
  }, false);
</script>
</body>

jsteel on 6 Apr 2018

Ticket opened with Mozilla here: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

jsteel on 6 Apr 2018

👍3

I can confirm this :(

deepj on 10 Apr 2018

👍1

Confirmed

darthtrevino on 19 Apr 2018

👍1

A fix has been commited to Firefox and should be released with Firefox 63 (planned release on 2018-10-23)

renchap on 3 Aug 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] on 6 Jul 2019

This is still happening for me both under Fedora 30 and Windows 10 (Firefox 69). I have also added this information to the Firefox ticket. Since the last comment on the ticket before mine reads:

The issue is seemingly also happening only if redrawing is requested "in the main thread".
When wrapping the redrawing in requestAnimationFrame(), this works as expected.

Is there anything we can do to work around the bug in the library?

Edit 09/19/2019:
There seems to have been a regression in Firefox 69 reintroducing this bug, i have filed a new ticket with them: https://bugzilla.mozilla.org/show_bug.cgi?id=1582401