React-dnd: React DnD ne fonctionne pas sur Chrome 59

Pas le cas; ça marche parfaitement bien. Essayez d'exécuter Chrome sans aucune extension

@theTechie as -tu vérifié sur Mac sous Windows ? Sur Mac, cela fonctionne normalement.

J'ai vérifié sur Mac. Est-ce un problème avec une plate-forme spécifique ?

@theTechie pour une raison quelconque,

J'ai testé sur plusieurs plates-formes Windows 8.1 / Windows 7 sur Chrome et également sur IE 10 et IE 11. Cela fonctionne bien pour moi.

@hunterbmt - Voyez-vous des erreurs dans la console ? pourriez-vous partager un GIF pour un certain contexte ?

@theTechie que j'ai testé sur le site d'exemple de
J'ai corrigé en déclenchant manuellement « dragend » après « drop » si le navigateur ne le déclenchait pas après un certain temps.
Je ne sais pas si d'autres échouent également dans ce problème, si c'est le cas, je pourrais déplacer le correctif dans react-dnd.

En regardant le journal des modifications de Chrome 59 mais je n'ai rien trouvé, si vous avez un aperçu, j'apprécierai beaucoup la contribution.

@hunterbmt Je pense que cela pourrait être quelque chose de particulier à votre code; même si j'ai utilisé react-dnd dans plusieurs instances et toutes fonctionnent correctement sur Chrome 59.

Malheureusement, je ne suis pas en mesure de vous dire pourquoi cela se produirait. Peut-être que je peux essayer de trouver quelque chose si vous êtes d'accord pour partager votre code ici.

J'ai le même problème dans Chrome 59.0.3071.86 sous Windows. Cela fonctionne bien dans Firefox et fonctionnait bien dans les versions antérieures de Chrome. package.json :

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

Le résultat est le même avec 2.4.0/2.4.1

Résolu avec ce 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 Je me retrouve avec un hack assez similaire, mais le problème persiste lorsque je fais un glisser-déposer rapide dans une zone non droppable, Chrome ne parvient pas à déclencher 'dragend' et, bien sûr, ne déclenchera pas non plus de 'drop'. Pourriez-vous vérifier de votre côté ?

@hunterbmt Je n'ai aucun problème à tomber dans des zones impossibles à déposer. Je n'ai pas vérifié quels événements sont déclenchés, mais react-dnd n'entre pas dans un état corrompu, donc tout semble bien fonctionner.

J'ai créé un PR pour résoudre ce problème et les problèmes potentiels en simplifiant la condition pour déclencher endDrag
https://github.com/react-dnd/react-dnd/pull/801

J'ai le même problème mais pas à chaque fois, juste dans certains cas, et par exemple ce cas est :
J'ai un widget qui peut être déposé dans la zone de dépôt, et cette zone de dépôt rendra du code HTML lorsque le widget sera déposé. Si je choisis de supprimer le widget vidéo, il affichera iframe et il se casse et je ne peux plus faire glisser aucun autre widget après cela (l'événement dragend n'est pas déclenché). Mais si je remplace ce iframe par du texte ou une image, cela fonctionne parfaitement bien, et cela fonctionnait avant Chrome 59, et cela fonctionne dans n'importe quel autre navigateur, je ne peux pas le comprendre, est le problème dans Chrome ou réagir-dnd ?

@rogyvoje Je crois que Chrome a changé quelque chose dans le déclenchement d'événements pour 'dragend'. J'ai essayé de rechercher plus d'informations, mais je ne les vois pas mentionner cela nulle part.
Btw, en fonction de « mousemove » après « dragstart » est plus logique et plus simple que selon « dragend » dans la plupart des cas et « mousemove » dans certains cas (élément de déplacement supprimé du DOM) comme mon PR.

@hunterbmt merci d'avoir démystifié
mais comment puis-je utiliser votre pull request via npm/yarn ? Parce qu'il semble qu'il n'est pas fusionné, ou est-ce que je me trompe ? ??

@rogyvoje Je pense que vous pouvez, au lieu de la version, pointez directement sur ma branche. PR a été fusionné mais la nouvelle version de react-dnd n'est pas encore publiée, vous ne pouvez donc pas l'obtenir directement à partir de react-dnd npm/yarn.

@hunterbmt
J'ai essayé de faire comme ça :

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

mais l'écran de connexion apparaît toujours 😕

Quelqu'un peut-il dans ce fil fournir un cas reproductible du problème? j'utilise beaucoup react-dnd mais je ne peux identifier aucun problème sur Chrome 59, donc je suis très intéressé d'avoir un cas reproductible où react-dnd échoue parce que Chrome 59 ne déclenche pas drag/drop événements correctement.

je pense que s'il y a un problème, il devrait être reproductible très facilement par certains d'entre vous qui ont vu le problème en premier lieu, alors s'il vous plaît essayez de prendre le temps de poster un cas reproductible (ce peut être un dépôt github ou un code posté ici https://codesandbox.io/) et essayez de fournir des informations significatives (comme le système d'exploitation, la version de react-dnd, etc.). merci !

@bjrmatos ici, j'en ai fait un, celui-ci est mon cas et j'espère que ça va aider !

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

testé sur chrome 59, et sur la mise à jour actuelle :
Version 60.0.3112.78 (version officielle) (64 bits)

pour les infos windows :
Nom du système d'exploitation : Microsoft Windows 10 Pro
Version du système d'exploitation : 10.0.14393 N/A Build 14393

Testé sur Chrome : Version 55.0.2883.87 (64 bits) (sur Linux/Mint 18) et fonctionne parfaitement...

@rogyvoje merci ! Je regarderai plus tard, voyons si je peux voir le problème dans ma VM Windows 7, sinon je vais essayer une autre VM avec Windows 10. Merci !

salut @rogyvoje j'ai essayé votre référentiel directement dans la dernière version de chrome car vous avez dit que vous aviez le même problème là-bas (version 60.0.3112.78 (version officielle) (64 bits) - Windows 10 PRO) mais je ne vois pas toute erreur.

c'est le résultat attendu non ?

existe-t-il d'autres étapes pour reproduire votre problème ?

J'ai installé les dépendances avec [email protected] (au lieu d'utiliser yarn ) et juste pour mémoire voici les versions exactes des dépendances installées :

REMARQUE : j'utilise une machine virtuelle Windows 10 PRO (car mon système d'exploitation principal est OSX El Capitan, dans lequel le problème avec Chrome n'existe pas)

et même résultat avec toutes mes extensions chrome désactivées :

@rogyvoje je viens de lire vos commentaires précédents et maintenant je peux reproduire le problème, comme vous le dites, le premier glisser fonctionne, mais si quelqu'un essaie de faire glisser une deuxième fois, l'erreur Cannot call hover after drop apparaît.

Merci pour le référentiel, je vais essayer de me plonger dans le problème et de chercher une solution qui satisfasse tout le monde.

semble que le bogue soit confirmé : https://bugs.chromium.org/p/chromium/issues/detail?id=737691&q=dragend&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS %20Modifié

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

pour mémoire, je peux reproduire l'erreur avec le même exemple également dans Chrome (60) Mac OS (El Capitan) (je ne sais pas s'il était également présent dans Chrome 59 pour Mac), donc il échoue partout lors de l'utilisation de Chrome (> =59) et lors de l'utilisation d'iframes 😂

@bjrmatos super, content que tu le reproduis avec succès 😄
pas sûr de ce qui va se passer ensuite, devons-nous attendre Chrome 61 ? ??

pas sûr de ce qui va se passer ensuite, devons-nous attendre Chrome 61 ?

peut-être, de toute façon, j'essaie de trouver un joli patch qui fait fonctionner React-dnd dans Chrome 59, 60, donc je posterai ici plus de mises à jour plus tard 👍

Je pense que cela résout le problème. https://github.com/react-dnd/react-dnd/pull/820
Il est déjà fusionné, mais pas publié.

Des nouvelles concernant ce problème ?
J'ai toujours des problèmes avec la dernière version de Chrome...

@ms88privat #820 résout l'exception, mais pas le problème initial selon lequel sur Chrome (j'utilise 67) source.endDrag n'est jamais appelé lorsqu'une iframe est rendue.

Avant 3.0, nous utilisions la solution de contournement fournie par

Vous pouvez le reproduire en ajoutant endDrag à Video.js dans le dépôt de test 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");
    }
};

La première fois que vous le faites glisser, endDrag n'est pas appelé pour Chrome.

il se bloque également lorsque vous incluez dans iframe dans la page à l'intérieur de chrome (59 jusqu'à présent) le correctif de @0rvar fonctionne également dans ce cas

Ceci est maintenant corrigé dans Chrome 72, qui a été publié hier.

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.