React-dnd: Problema com eventos perdedores do Firefox

Criado em 5 abr. 2018 · 7Comentários · Fonte: react-dnd/react-dnd

Eu encontrei um bug bastante desagradável que parece estar causando um problema possivelmente no próprio Firefox. Posso reproduzir esse erro até no exemplo do tutorial de xadrez. Basicamente, você pode entrar em um estado em que o Firefox não parece enviar eventos do mouse, exceto o dragstart.

Reproduzindo

Clique em uma fonte de arrastar e comece a arrastá-la, solte o mouse antes que a visualização apareça. No exemplo do tutorial, depois de fazer isso uma vez, os alvos de queda permanecerão destacados. Às vezes, você precisa fazer isso imediatamente novamente para acionar o bug completo.

Isso é muito mais fácil de fazer em páginas mais lentas, onde a visualização demora um pouco para aparecer. Tenho uma página que é muito lenta e posso reproduzi-la liberando o clique às vezes até um segundo depois de começar a arrastar.

Sintomas

Depois de ter acionado o bug, o Firefox parece parar de enviar eventos de arrastar, exceto dragstart, para quase todas as guias. Às vezes, posso causar o problema em uma página com a reação a ela e, em seguida, todas as minhas outras guias começam a exibir os mesmos sintomas.

Existem apenas duas maneiras de sair desse estado quebrado. Primeiro, você pode fechar e reabrir o navegador. Em segundo lugar, você pode arrastar uma página em que o react-dnd ainda está funcionando. Depois de fazer isso, a página que causou a quebra receberá um evento dragend. Então:

A guia 1 vê um clickstart
A guia 1 não vê mais eventos além do clickstart
Abra a aba 2 e comece a arrastar
A guia 1 vê um clique e agora está funcionando novamente

Aqui está um vídeo mostrando esse comportamento estranho usando duas guias mostrando https://react-dnd.github.io/react-dnd/examples-chessboard-tutorial-app.html.

ReactDnDFirefoxBug.zip

Estou no macOS High Sierra 10.13.3 (17D102) com Firefox 59.0.2 (64 bits). Parece acontecer em qualquer versão> = 57. Reproduzi o erro com react-dnd 2.6.0 e 2.5.4.

Eu ficaria feliz em ajudar com qualquer teste ou depuração para consertar isso ou sugerir uma solução alternativa se o problema estiver no próprio Firefox.

browser bug bug wontfix

Fonte

jsteel

👍10

Comentários muito úteis

Tíquete aberto com Mozilla aqui: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

jsteel em 6 abr. 2018

👍3

Todos 7 comentários

Eu encontrei uma maneira melhor de acionar o bug que nem mesmo usa react-dnd.

Depois de quebrar a página, a única maneira que encontro para consertá-la é mover a peça de xadrez no exemplo react-dnd ou reiniciar o Firefox. Não tenho certeza do que exatamente o exemplo react-dnd está fazendo para retirá-lo, ou como fazer uma solução alternativa para ele.

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

Tíquete aberto com Mozilla aqui: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

jsteel em 6 abr. 2018

👍3

Posso confirmar isso :(

deepj em 10 abr. 2018

👍1

Confirmado

darthtrevino em 19 abr. 2018

👍1

Uma correção foi enviada para o Firefox e deve ser lançada com o Firefox 63 (lançamento planejado para 23/10/2018)

renchap em 3 ago. 2018

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

stale[bot] em 6 jul. 2019

Isso ainda está acontecendo para mim no Fedora 30 e no Windows 10 (Firefox 69). Também adicionei essa informação ao tíquete do Firefox. Já que o último comentário sobre o tíquete antes do meu foi:

O problema está aparentemente acontecendo apenas se o redesenho for solicitado "no tópico principal".
Ao envolver o redesenho em requestAnimationFrame (), isso funciona conforme o esperado.

Existe algo que possamos fazer para contornar o bug na biblioteca?

Editar 19/09/2019:
Parece ter havido uma regressão no Firefox 69 reintroduzindo esse bug, eu preenchi um novo tíquete com eles: https://bugzilla.mozilla.org/show_bug.cgi?id=1582401