React-dnd: React DnD não funciona no Chrome 59

Não é o caso; funciona perfeitamente bem. Tente executar o Chrome sem extensões

@theTechie você verificou no Mac no Windows? No Mac está funcionando normalmente.

Eu verifiquei no Mac. É um problema com uma plataforma específica?

@theTechie por algum motivo,

Eu testei em várias plataformas Windows 8.1 / Windows 7 no Chrome e também no IE 10 e IE 11. Funciona bem para mim.

@hunterbmt - Você vê algum erro no console? você poderia compartilhar um GIF para algum contexto?

@theTechie eu testei no site de exemplo da
Eu consertei por acionar manualmente 'dragend' após 'soltar' se o navegador não acionou depois de um tempo.
Não sei se outras pessoas também falham nesse problema, se for esse o caso, eu poderia mover a correção para react-dnd.

Olhando para o changelog do Chrome 59, mas não encontrei nada, se você tiver alguma ideia, vou agradecer muito a entrada.

@hunterbmt Acho que pode ser algo peculiar ao seu código; até eu usei o react-dnd em várias instâncias e todos eles funcionam bem no Chrome 59.

Infelizmente, não posso dizer por que isso estaria acontecendo. Talvez eu possa tentar encontrar algo se você concordar em compartilhar seu código aqui.

Eu tenho o mesmo problema no Chrome 59.0.3071.86 no Windows. Ele funciona bem no Firefox e funcionou bem nas versões anteriores do Chrome. package.json:

{
  "dependencies": {
    "react-dnd": "2.1.4",
    "react-dnd-html5-backend": "2.1.2",
  }
}

O resultado é o mesmo com 2.4.0 / 2.4.1

Resolvido com este hack:

const ModifiedBackend = (...args) => {
    const instance = new HTML5Backend(...args);

    // Fix Chrome 59 not sending a DragEnd after Drop, which other browsers do and react-dnd expects
    const originalTopDrop = instance.handleTopDrop;
    const originalTopDragEndCapture = instance.handleTopDragEndCapture;
    let dragEndTimeout;
    instance.handleTopDrop = (e, ...args) => {
        dragEndTimeout = setTimeout(() => {
            originalTopDragEndCapture(e, ...args);
        }, 0);
        originalTopDrop(e, ...args);
    };
    instance.handleTopDragEndCapture = (e, ...args) => {
        clearTimeout(dragEndTimeout);
        originalTopDragEndCapture(e, ...args);
    };

    return instance;
};

// Decorate root elements with this
export default DragDropContext(ModifiedBackend);

@awestroke Eu

@hunterbmt Não tenho problemas em deixar cair em áreas não soltáveis. Não verifiquei quais eventos são disparados, mas react-dnd não entra em um estado corrompido, então tudo parece funcionar bem.

Eu criei um PR para corrigir esse problema e os possíveis, simplificando a condição para acionar o endDrag
https://github.com/react-dnd/react-dnd/pull/801

Tenho o mesmo problema embora não sempre, apenas em alguns casos, e por exemplo esse caso é:
Eu tenho um widget que pode ser solto dentro da área de soltar, e essa área irá renderizar algum html quando o widget for solto. Se eu escolher soltar o widget de vídeo, ele renderizará iframe e ele quebrará e não posso arrastar nenhum outro widget depois disso (o evento dragend não é disparado). Mas se eu substituir aquele iframe por algum texto ou imagem, funciona perfeitamente, e estava funcionando antes do Chrome 59, e funciona em qualquer outro navegador, não consigo descobrir, é o problema no Chrome ou react-dnd?

@rogyvoje Eu acredito que o Chrome mudou algo no acionamento de eventos para 'dragend'. Tentei pesquisar mais informações, mas não os vejo mencionando isso em lugar nenhum.
A propósito, dependendo de 'mousemove' após 'dragstart' faz mais sentido e mais simples do que dependendo de 'dragend' na maioria dos casos e 'mousemove' em alguns casos (arrastando elemento removido do DOM) como meu PR.

@hunterbmt obrigado por desmistificar 😄
mas como posso usar sua solicitação de pull por meio de npm / yarn? Porque parece que não está mesclado, ou estou errado? 😕

@rogyvoje Eu acho que você pode, em vez da versão apenas apontar para o meu branch diretamente. PR foi mesclado, mas react-dnd ainda não lançou uma nova versão, então você não pode obtê-la diretamente de react-dnd npm / yarn.

@hunterbmt
Tentei fazer assim:

npm install git+https://github.com/react-dnd/react-dnd.git#41eb8caa0bc106c9edf0d3ca628b49e70525090b

mas a tela de login sempre aparece 😕

alguém neste tópico pode fornecer um caso reproduzível do problema? estou usando react-dnd muito, mas não consigo identificar nenhum problema no Chrome 59, então estou muito interessado em ter um caso reproduzível em que react-dnd falha porque o Chrome 59 não dispara drag/drop eventos corretamente.

Eu acho que se houver um problema, ele deve ser reproduzível facilmente por alguns de vocês que perceberam o problema inicialmente, então, por favor, tente postar um caso reproduzível (pode ser um repositório github ou código postado aqui https://codesandbox.io/) e tente fornecer qualquer informação significativa (como sistema operacional, versão do react-dnd, etc). obrigado!

@bjrmatos aqui, fiz um, esse é o meu caso e espero que ajude!

https://github.com/rogyvoje/react-dnd-chrome-59

testei no Chrome 59 e na atualização atual:
Versão 60.0.3112.78 (versão oficial) (64 bits)

quanto às informações do Windows:
Nome do SO: Microsoft Windows 10 Pro
Versão do sistema operacional: 10.0.14393 N / A Compilação 14393

Testado no Chrome: Versão 55.0.2883.87 (64 bits) (no Linux / Mint 18) e funciona perfeitamente ...

@rogyvoje thnks! Vou dar uma olhada mais tarde, vamos ver se consigo ver o problema na minha VM do windows 7, caso contrário, vou tentar outra VM com o windows 10. thnks!

hi @rogyvoje tentei seu repositório diretamente na última versão do Chrome, pois você disse que teve o mesmo problema lá (versão 60.0.3112.78 (versão oficial) (64 bits) - Windows 10 PRO), mas não vejo qualquer erro.

esse é o resultado esperado, certo?

há alguma / mais outras etapas para reproduzir seu problema?

Eu instalei as dependências com [email protected] (em vez de usar yarn ) e apenas para registro aqui estão as versões exatas das dependências instaladas:

NOTA: estou usando um Windows 10 PRO VM (porque meu SO principal é o OSX El Capitan, no qual o problema com o Chrome não existe)

e o mesmo resultado com todas as minhas extensões do Chrome desativadas:

@rogyvoje acabei de ler seus comentários anteriores e agora posso reproduzir o problema, como você disse, a primeira tentativa de arrastar funciona, mas se alguém tentar arrastar uma segunda vez, o erro Cannot call hover after drop aparecerá.

Obrigado pelo repositório, vou tentar mergulhar no problema e procurar uma solução que deixe todos felizes.

parece que o bug foi confirmado: https://bugs.chromium.org/p/chromium/issues/detail?id=737691&q=dragend&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS % 20Modificado

https://stackoverflow.com/questions/44764343/dragend-event-not-firing-in-chrome-when-an-iframe-is-moved-in-drop-function

para registro, posso reproduzir o erro com o mesmo exemplo também no Chrome (60) Mac OS (El Capitan) (não tenho certeza se ele estava presente também no Chrome 59 para Mac), por isso está falhando em todos os lugares ao usar o Chrome (> = 59) e ao usar iframes 😂

@bjrmatos ótimo, que bom que você o reproduziu com sucesso 😄
só não tenho certeza do que vai acontecer a seguir, devemos esperar pelo Chrome 61? 😂

só não tenho certeza do que vai acontecer a seguir, devemos esperar pelo Chrome 61?

talvez, de qualquer maneira, estou tentando encontrar um bom patch que faça o react-dnd funcionar no Chrome 59, 60, então postarei aqui mais atualizações depois 👍

Acho que isso resolve o problema. https://github.com/react-dnd/react-dnd/pull/820
Já está mesclado, mas não liberado.

Alguma notícia sobre este assunto?
Ainda estou tendo problemas no cromo mais recente ...

@ ms88privat # 820 resolve a exceção, mas não o problema inicial de que no Chrome (estou usando 67) source.endDrag nunca é chamado quando um iframe é renderizado.

Antes do 3.0, usávamos a solução alternativa fornecida por tipificações TS mais rígidas não é possível substituir métodos de instância ou métodos de classe privada.

Você pode reproduzi-lo adicionando endDrag a Video.js no repositório de teste de @rogyvoje

const source = {
    beginDrag(props) {
        return {
            renderVideo: true
        };
    },
    // Add end drag
    endDrag(props, monitor) {
        if (!monitor) return;
        // Only gets called when the iframe is already rendered
        console.log("endDrag");
    }
};

Na primeira vez que você o arrasta, endDrag não é chamado para o Chrome.

ele também congela quando você inclui no iframe na página dentro do chrome (59 até o atual). A correção de @ 0rvar também funciona neste caso

Isso foi corrigido agora no Chrome 72, que foi lançado ontem.

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.