React-dnd: React DnD no funciona en Chrome 59

No es el caso; funciona perfectamente bien. Intente ejecutar Chrome sin ninguna extensión

@theTechie, ¿

Lo comprobé en Mac. ¿Es un problema con una plataforma específica?

@theTechie por alguna razón, react-dnd no activa 'dragend' como de costumbre. Probé en un par de máquinas, una Mac tiene el mismo problema, todas las ventanas tienen este problema. ¿Cualquier pensamiento?

Probé en múltiples plataformas Windows 8.1 / Windows 7 en Chrome y también en IE 10 e IE 11. Funciona bien para mí.

@hunterbmt - ¿Ves algún error en la consola? ¿Podrías compartir un GIF para algún contexto?

@theTechie Probé en el sitio de ejemplo de react dnd, no tuve ningún problema. Pero en nuestra aplicación, Chrome 59 no activó 'dragend' en algunos escenarios, lo que funciona perfectamente en Chrome 58, FF, Safari e incluso en IE.
Lo solucioné activando manualmente 'dragend' después de 'soltar' si el navegador no lo activaba después de un tiempo.
No sé si otros también fallan en este problema, si ese es el caso, podría mover la solución a react-dnd.

Mirando el registro de cambios de Chrome 59 pero no encontré nada, si tiene alguna idea, agradeceré mucho la entrada.

@hunterbmt Creo que podría ser algo peculiar de su código; Incluso he usado react-dnd en varias instancias y todas funcionan bien en Chrome 59.

Desafortunadamente, no puedo decirles por qué sucede esto. Tal vez, pueda intentar encontrar algo si está bien compartiendo su código aquí.

Tengo el mismo problema en Chrome 59.0.3071.86 en Windows. Funciona bien en Firefox y funcionó bien en versiones anteriores de Chrome. package.json:

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

El resultado es el mismo con 2.4.0 / 2.4.1

Resuelto con este truco:

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 Termino con un truco bastante similar, pero el problema sigue ocurriendo cuando arrastro y suelto rápidamente en un área que no se puede soltar, Chrome no activa 'dragend' y, por supuesto, tampoco activa 'soltar'. ¿Podrías comprobar desde tu lado?

@hunterbmt No tengo problemas para dejar caer en áreas que no se pueden eliminar. No he comprobado qué eventos se activan, pero react-dnd no entra en un estado dañado, por lo que todo parece funcionar bien.

Creé un PR para solucionar este problema y los problemas potenciales simplificando la condición para activar endDrag
https://github.com/react-dnd/react-dnd/pull/801

Tengo el mismo problema aunque no siempre, solo en algunos casos, y por ejemplo ese caso es:
Tengo un widget que se puede colocar dentro del área de colocación, y esa área de colocación generará algo de html cuando se suelte el widget. Si elijo soltar el widget de video, se procesará iframe y se rompe y no puedo arrastrar ningún otro widget después de eso (el evento dragend no se activa). Pero si reemplazo ese iframe con algún texto o imagen, funciona perfectamente bien, y estaba funcionando antes de Chrome 59, y funciona en cualquier otro navegador, no puedo entenderlo, ¿es el problema en ¿Chrome o react-dnd?

@rogyvoje Creo que Chrome cambió algo en caso de que se activara 'dragend'. Intenté buscar más información, pero no veo que lo mencionen en ninguna parte.
Por cierto, dependiendo de 'mousemove' después de 'dragstart' tiene más sentido y es más simple que dependiendo de 'dragend' en la mayoría de los casos y 'mousemove' en algunos casos (elemento de arrastre eliminado de DOM) como mi PR.

@hunterbmt gracias por desmitificar 😄
pero ¿cómo puedo usar su solicitud de extracción a través de npm / yarn? Porque parece que no está fusionado, ¿o me equivoco? 😕

@rogyvoje Creo que puedes, en lugar de la versión, solo apunta a mi rama directamente. PR se fusionó, pero react-dnd aún no se ha lanzado una nueva versión, por lo que no puede obtenerla directamente de react-dnd npm / yarn.

@hunterbmt
Traté de hacerlo así:

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

pero la pantalla de inicio de sesión siempre aparece 😕

¿Alguien en este hilo puede proporcionar un caso reproducible del problema? Estoy usando react-dnd mucho pero no puedo identificar ningún problema en Chrome 59, así que estoy muy interesado en tener un caso reproducible donde react-dnd falla porque Chrome 59 no dispara drag/drop eventos correctamente.

Creo que si hay un problema, algunos de ustedes que vieron el problema en primer lugar deberían poder reproducirlo muy fácilmente, así que intente tomarse el tiempo para publicar un caso reproducible (puede ser un repositorio de github o un código publicado aquí https://codesandbox.io/) e intente proporcionar información significativa (como sistema operativo, versión de react-dnd, etc.). gracias!

@bjrmatos aquí, hice uno, este es mi caso y espero que ayude!

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

lo probé en Chrome 59 y en la actualización actual:
Versión 60.0.3112.78 (compilación oficial) (64 bits)

en cuanto a la información de Windows:
Nombre del sistema operativo: Microsoft Windows 10 Pro
Versión del SO: 10.0.14393 N / A Compilación 14393

Probado en Chrome: Versión 55.0.2883.87 (64 bits) (en Linux / Mint 18) y funciona perfectamente ...

@rogyvoje gracias! Lo echaré un vistazo más tarde, veamos si puedo ver el problema en mi VM de Windows 7, de lo contrario intentaré con otra VM con Windows 10. ¡Gracias!

hola @rogyvoje, probé su repositorio directamente en la última versión de Chrome, ya que dijo que tenía el mismo problema allí (versión 60.0.3112.78 (compilación oficial) (64 bits) - Windows 10 PRO) pero no veo cualquier error.

este es el resultado esperado, ¿verdad?

¿Existen otros pasos para reproducir su problema?

He instalado las dependencias con [email protected] (en lugar de usar yarn ) y solo para el registro aquí están las versiones exactas de las dependencias instaladas:

NOTA: estoy usando Windows 10 PRO VM (porque mi sistema operativo principal es OSX El Capitan, en el que el problema con Chrome no existe)

y el mismo resultado con todas mis extensiones de Chrome deshabilitadas:

@rogyvoje acabo de leer tus comentarios anteriores y ahora puedo reproducir el problema, como dices que el primer arrastre funciona, pero si alguien intenta arrastrar por segunda vez, aparece el error Cannot call hover after drop .

Gracias por el repositorio, intentaré sumergirme en el problema y buscar una solución que haga felices a todos.

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

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

para que conste, puedo reproducir el error con el mismo ejemplo también en Chrome (60) Mac OS (El Capitan) (no estoy seguro de si estaba presente también en Chrome 59 para Mac), por lo que está fallando en todas partes cuando se usa Chrome (> = 59) y al usar iframes 😂

@bjrmatos genial, me alegro de que lo hayas reproducido con éxito 😄
simplemente no estoy seguro de lo que sucederá a continuación, ¿deberíamos esperar a Chrome 61? 😂

simplemente no estoy seguro de lo que sucederá a continuación, ¿deberíamos esperar a Chrome 61?

tal vez, de todos modos, estoy tratando de encontrar un buen parche que haga que react-dnd funcione en Chrome 59, 60, así que publicaré aquí más actualizaciones más adelante 👍

Creo que esto resuelve el problema. https://github.com/react-dnd/react-dnd/pull/820
Ya está fusionado, pero no lanzado.

¿Alguna noticia sobre este tema?
Sigo teniendo problemas con la última versión de Chrome ...

@ ms88privat # 820 resuelve la excepción, pero no el problema inicial que en Chrome (estoy usando 67) source.endDrag nunca se llama cuando se procesa un iframe.

Antes de 3.0 utilizamos la solución alternativa proporcionada por @ 0rvar , pero con los tipos de TS más estrictos no es posible anular los métodos de instancia o los métodos de clases privadas.

Puede reproducirlo agregando endDrag a Video.js en el repositorio de prueba 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 primera vez que lo arrastra, endDrag no se llama para Chrome.

también se congela cuando se incluye en iframe en la página dentro de Chrome (59 hasta la actual). La corrección de @ 0rvar también funciona en este caso

Esto está arreglado ahora en Chrome 72, que se lanzó ayer.

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.