React-dnd: Problema con la pérdida de eventos de Firefox

Creado en 5 abr. 2018 · 7Comentarios · Fuente: react-dnd/react-dnd

Encontré un error bastante desagradable que parece estar provocando un problema posiblemente en el propio Firefox. Puedo reproducir este error incluso en el ejemplo del tutorial de ajedrez. Básicamente, puede entrar en un estado en el que Firefox no parece enviar ningún evento de mouse, excepto dragstart.

Reproducir

Haga clic en una fuente de arrastre y comience a arrastrarla, suelte el mouse antes de que aparezca la vista previa. En el ejemplo del tutorial, después de hacerlo una vez, los destinos de colocación permanecerán resaltados. A veces tienes que volver a hacerlo inmediatamente para activar el error completo.

Esto es mucho más fácil de lograr en páginas más lentas en las que la vista previa tarda en aparecer. Tengo una página que es muy lenta y puedo reproducirla soltando el clic a veces incluso un segundo después de que comenzó a arrastrarse.

Síntomas

Una vez que haya desencadenado el error, Firefox parece dejar de enviar eventos de arrastre que no sean dragstart a casi todas las pestañas. A veces puedo causar el problema en una página con react-dnd, y luego todas mis otras pestañas comienzan a mostrar los mismos síntomas.

Solo hay dos formas de salir de este estado roto. Primero, puede cerrar y volver a abrir el navegador. En segundo lugar, puede iniciar un arrastre en una página donde react-dnd todavía está funcionando. Una vez que haya hecho esto, la página que causó la ruptura recibirá un evento dragend. Entonces:

La pestaña 1 ve un clickstart
La pestaña 1 no ve más eventos además de clickstart
Abra la pestaña 2 y comience a arrastrar
La pestaña 1 ve un clickend y ahora está funcionando nuevamente

Aquí hay un video que muestra este comportamiento extraño usando dos pestañas que muestran https://react-dnd.github.io/react-dnd/examples-chessboard-tutorial-app.html.

ReactDnDFirefoxBug.zip

Estoy en macOS High Sierra 10.13.3 (17D102) con Firefox 59.0.2 (64 bits). Parece suceder en cualquier versión> = 57. He reproducido el error con react-dnd 2.6.0 y 2.5.4.

Estaría encantado de ayudar con cualquier prueba o depuración para solucionar esto o encontrar una solución si el problema está en el propio Firefox.

browser bug bug wontfix

Fuente

jsteel

👍10

Comentario más útil

Ticket abierto con Mozilla aquí: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

jsteel en 6 abr. 2018

👍3

Todos 7 comentarios

He encontrado una mejor manera de activar el error que ni siquiera usa react-dnd.

Una vez que haya roto la página, la única forma que puedo encontrar para arreglarla es mover la pieza de ajedrez en el ejemplo de react-dnd o reiniciar Firefox. No estoy seguro de qué está haciendo exactamente el ejemplo de react-dnd para despegarlo, o cómo solucionarlo.

<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 en 6 abr. 2018

Ticket abierto con Mozilla aquí: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

jsteel en 6 abr. 2018

👍3

Puedo confirmar esto :(

deepj en 10 abr. 2018

👍1

Confirmado

darthtrevino en 19 abr. 2018

👍1

Se ha comprometido una solución para Firefox y debería lanzarse con Firefox 63 (lanzamiento planificado el 2018-10-23)

renchap en 3 ago. 2018

Este problema se ha marcado automáticamente como obsoleto porque no ha tenido actividad reciente. Se cerrará si no se produce más actividad. Gracias por sus aportaciones.

stale[bot] en 6 jul. 2019

Esto todavía me está sucediendo tanto en Fedora 30 como en Windows 10 (Firefox 69). También agregué esta información al ticket de Firefox. Desde el último comentario en el boleto antes del mío dice:

Aparentemente, el problema también ocurre solo si se solicita un nuevo dibujo "en el hilo principal".
Al envolver el redibujado en requestAnimationFrame (), esto funciona como se esperaba.

¿Hay algo que podamos hacer para solucionar el error en la biblioteca?

Editar 19/09/2019:
Parece que hubo una regresión en Firefox 69 reintroduciendo este error, he presentado un nuevo ticket con ellos: https://bugzilla.mozilla.org/show_bug.cgi?id=1582401