Issue with Firefox losing events #1000

jsteel · 2018-04-05T20:37:36Z

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.

jsteel · 2018-04-06T14:55:24Z

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 · 2018-04-06T16:05:52Z

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

deepj · 2018-04-10T20:19:13Z

I can confirm this :(

darthtrevino · 2018-04-19T03:01:31Z

Confirmed

renchap · 2018-08-03T08:37:11Z

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

stale · 2019-07-06T04:09:26Z

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.

saltenhub · 2019-09-18T17:14:10Z

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

darthtrevino added bug browser bug labels Apr 19, 2018

cormacrelf mentioned this issue Jul 3, 2018

Randomly totally broken in Firefox frontend-collective/react-sortable-tree#332

Open

shannah mentioned this issue Aug 21, 2018

[BUG?] scrollVisibleBool and alwaysTensileBool ignored codenameone/CodenameOne#2525

Closed

stale bot added the wontfix label Jul 6, 2019

stale bot closed this as completed Jul 13, 2019

cormacrelf mentioned this issue Oct 2, 2019

Simple sortable freeze on drop cormacrelf/angular-skyhook#468

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue with Firefox losing events #1000

Issue with Firefox losing events #1000

jsteel commented Apr 5, 2018 •

edited

jsteel commented Apr 6, 2018

jsteel commented Apr 6, 2018

deepj commented Apr 10, 2018

darthtrevino commented Apr 19, 2018

renchap commented Aug 3, 2018

stale bot commented Jul 6, 2019

saltenhub commented Sep 18, 2019 •

edited

Issue with Firefox losing events #1000

Issue with Firefox losing events #1000

Comments

jsteel commented Apr 5, 2018 • edited

Reproducing

Symptoms

jsteel commented Apr 6, 2018

jsteel commented Apr 6, 2018

deepj commented Apr 10, 2018

darthtrevino commented Apr 19, 2018

renchap commented Aug 3, 2018

stale bot commented Jul 6, 2019

saltenhub commented Sep 18, 2019 • edited

jsteel commented Apr 5, 2018 •

edited

saltenhub commented Sep 18, 2019 •

edited