React-dnd: Bereaksi DnD tidak berfungsi di Chrome 59

Bukan kasusnya; itu bekerja dengan baik. Coba jalankan Chrome tanpa ekstensi apa pun

@theTechie apakah Anda memeriksa Mac di Windows? Di Mac berfungsi normal.

saya memeriksa di Mac. Apakah ini masalah dengan platform tertentu?

@theTechie untuk beberapa alasan, reaksi-dnd jangan memicu 'dragend' seperti biasa. Saya menguji pada mesin pasangan, satu Mac memiliki masalah yang sama, semua Windows memiliki masalah ini. Ada pikiran?

Saya menguji pada beberapa platform Windows 8.1 / Windows 7 di Chrome dan juga pada IE 10 dan IE 11. Ini berfungsi dengan baik untuk saya.

@hunterbmt - Apakah Anda melihat kesalahan di konsol? dapatkah Anda membagikan GIF untuk beberapa konteks?

@theTechie Saya menguji di situs contoh reaksi dnd, tidak ada masalah. Tetapi dalam aplikasi kami, Chrome 59 tidak memicu 'dragend' dalam beberapa skenario yang berfungsi normal pada Chrome 58, FF, Safari, dan bahkan IE.
Saya memperbaikinya dengan memicu 'dragend' secara manual setelah 'drop' jika browser tidak memicunya setelah beberapa saat.
Saya tidak tahu apakah orang lain juga gagal dalam masalah ini, jika itu masalahnya, saya dapat memindahkan perbaikannya ke react-dnd.

Melihat log perubahan Chrome 59 tetapi tidak menemukan apa pun, jika Anda memiliki wawasan, saya akan sangat menghargai masukannya.

@hunterbmt Saya pikir itu bisa menjadi sesuatu yang aneh untuk kode Anda; bahkan saya telah menggunakan react-dnd dalam beberapa contoh dan semuanya berfungsi dengan baik di Chrome 59.

Sayangnya, saya tidak dapat memberi tahu Anda mengapa ini terjadi. Mungkin, saya dapat mencoba dan menemukan sesuatu jika Anda baik-baik saja membagikan kode Anda di sini.

Saya memiliki masalah yang sama di Chrome 59.0.3071.86 di Windows. Ini berfungsi dengan baik di Firefox, dan bekerja dengan baik di versi Chrome sebelumnya. paket.json:

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

Hasilnya sama dengan 2.4.0/2.4.1

Dipecahkan dengan peretasan ini:

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 Saya berakhir dengan peretasan yang sangat mirip tetapi masalah masih terjadi ketika saya menyeret dan melepaskan dengan cepat di area yang tidak dapat dilepas, Chrome gagal memicu 'dragend' dan tentu saja, tidak akan memicu 'jatuhkan' juga. Bisakah Anda memeriksa dari sisi Anda?

@hunterbmt Saya tidak punya masalah dengan menjatuhkan di area yang tidak dapat dijatuhkan. Saya belum memeriksa peristiwa mana yang dipicu, tetapi react-dnd tidak memasuki kondisi rusak, jadi semuanya tampak berfungsi dengan baik.

Saya membuat PR untuk memperbaiki masalah ini dan potensi masalah dengan menyederhanakan kondisi untuk memicu endDrag
https://github.com/react-dnd/react-dnd/pull/801

Saya memiliki masalah yang sama meskipun tidak setiap saat, hanya dalam beberapa kasus, dan misalnya kasus itu adalah:
Saya memiliki widget yang dapat dijatuhkan di dalam area drop, dan area drop itu akan membuat beberapa html ketika widget dijatuhkan. Jika saya memilih untuk menjatuhkan widget video, itu akan membuat iframe dan rusak dan saya tidak dapat menyeret widget lain setelah itu ( acara dragend tidak diaktifkan). Tetapi jika saya mengganti iframe dengan beberapa teks atau gambar, itu berfungsi dengan baik, dan itu berfungsi sebelum Chrome 59, dan berfungsi di browser lain, saya tidak dapat menemukannya, apakah masalahnya di Chrome atau reaksi-dnd?

@rogyvoje Saya percaya bahwa Chrome mengubah sesuatu yang memicu 'dragend'. Mencoba mencari informasi lebih lanjut tetapi saya tidak melihat mereka menyebutkannya di mana pun.
Btw, tergantung pada 'mousemove' setelah 'dragstart' lebih masuk akal dan lebih sederhana daripada bergantung pada 'dragend' di sebagian besar kasus dan 'mousemove' dalam beberapa kasus (elemen menyeret dihapus dari DOM) sebagai PR saya.

@hunterbmt terima kasih telah mengungkap misteri
tetapi bagaimana saya bisa menggunakan permintaan tarik Anda melalui npm/yarn? Karena sepertinya tidak menyatu, atau saya yang salah? 😕

@rogyvoje Saya pikir Anda bisa, alih-alih versi, arahkan ke cabang saya secara langsung. PR digabung tetapi react-dnd belum merilis versi baru sehingga Anda tidak bisa mendapatkannya langsung dari react-dnd npm/yarn.

@hunterbmt
Saya mencoba melakukannya seperti ini:

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

tapi layar login selalu muncul

adakah yang bisa di utas ini memberikan kasus masalah yang dapat direproduksi? saya sering menggunakan react-dnd tetapi saya tidak dapat mengidentifikasi masalah apa pun di Chrome 59, jadi saya sangat tertarik untuk memiliki kasus yang dapat direproduksi di mana react-dnd gagal karena Chrome 59 tidak menyala drag/drop acara dengan benar.

saya pikir jika ada masalah, itu harus direproduksi dengan sangat mudah oleh beberapa dari Anda yang melihat masalah di tempat pertama, jadi tolong luangkan waktu untuk memposting kasus yang dapat direproduksi (bisa berupa repo github atau kode yang diposting di sini https://codesandbox.io/) dan coba berikan informasi yang berarti (seperti OS, versi react-dnd, dll). terima kasih!

@bjrmatos di sini, saya membuatnya, ini adalah kasus saya dan saya harap ini akan membantu!

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

mengujinya di chrome 59, dan pada pembaruan saat ini:
Versi 60.0.3112.78 (Builan Resmi) (64-bit)

untuk info windows :
Nama OS: Microsoft Windows 10 Pro
Versi OS: 10.0.14393 N/A Build 14393

Diuji di Chrome: Versi 55.0.2883.87 (64-bit) (di Linux/Mint 18) dan bekerja dengan sempurna...

@rogyvoje terima kasih ! saya akan lihat nanti, mari kita lihat apakah saya dapat melihat masalah di VM windows 7 saya, jika tidak saya akan mencoba VM lain dengan windows 10. terima kasih!

hai @rogyvoje saya sudah mencoba repositori Anda secara langsung di rilis chrome terbaru karena Anda mengatakan bahwa Anda memiliki masalah yang sama di sana (Versi 60.0.3112.78 (Build Resmi) (64-bit)- Windows 10 PRO) tetapi saya tidak melihat kesalahan apa pun.

ini adalah hasil yang diharapkan, kan?

apakah ada/lebih langkah lain untuk mereproduksi masalah Anda?

saya telah menginstal dependensi dengan [email protected] (alih-alih menggunakan yarn ) dan sebagai catatan, berikut adalah versi persis dari dependensi yang diinstal:

CATATAN: saya menggunakan windows 10 PRO VM (karena OS utama saya adalah OSX El Capitan, di mana masalah dengan chrome tidak ada)

dan hasil yang sama dengan semua ekstensi chrome saya dinonaktifkan:

@rogyvoje saya baru saja membaca komentar Anda sebelumnya dan sekarang saya dapat mereproduksi masalah, seperti yang Anda katakan, tarikan pertama berfungsi, tetapi jika seseorang mencoba menyeret untuk kedua kalinya, kesalahan Cannot call hover after drop muncul.

terima kasih atas repositorinya, saya akan mencoba menyelami masalahnya dan mencari solusi yang membuat semua orang senang.

sepertinya bug telah dikonfirmasi: https://bugs.chromium.org/p/chromium/issues/detail?id=737691&q=dragend&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS %20Dimodifikasi

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

sebagai catatan saya dapat mereproduksi kesalahan dengan contoh yang sama juga di Chrome (60) Mac OS (El Capitan) (tidak yakin apakah itu ada juga di Chrome 59 untuk Mac), jadi gagal di mana-mana saat menggunakan Chrome (> =59) dan saat menggunakan iframe 😂

@bjrmatos bagus, senang Anda berhasil mereproduksinya
hanya tidak yakin apa yang akan terjadi selanjutnya, haruskah kita menunggu Chrome 61? 😂

hanya tidak yakin apa yang akan terjadi selanjutnya, haruskah kita menunggu Chrome 61?

mungkin, bagaimanapun saya mencoba menemukan tambalan yang bagus yang membuat reaksi-dnd berfungsi di Chrome 59, 60, jadi saya akan memposting di sini lebih banyak pembaruan nanti 👍

Saya pikir ini memecahkan masalah. https://github.com/react-dnd/react-dnd/pull/820
Itu sudah digabungkan, tetapi tidak dirilis.

Ada berita tentang masalah ini?
Saya masih mengalami masalah di chrome terbaru ...

@ms88privat #820 menyelesaikan pengecualian, tetapi bukan masalah awal yang di Chrome (saya menggunakan 67) source.endDrag tidak pernah dipanggil saat iframe dirender.

Sebelum 3.0 kami menggunakan solusi yang disediakan oleh @0rvar , tetapi dengan pengetikan TS yang lebih ketat, tidak mungkin untuk mengganti metode instance atau metode kelas pribadi.

Anda dapat mereproduksinya dengan menambahkan endDrag ke Video.js di repo pengujian @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");
    }
};

Pertama kali Anda menyeretnya, endDrag tidak dipanggil untuk Chrome.

itu juga membeku ketika Anda memasukkan iframe di halaman di dalam chrome (59 hingga saat ini) perbaikan @0rvar berfungsi dalam kasus ini juga

Ini diperbaiki sekarang di chrome 72, yang dirilis kemarin.

Masalah ini secara otomatis ditandai sebagai basi karena tidak ada aktivitas terbaru. Ini akan ditutup jika tidak ada aktivitas lebih lanjut yang terjadi. Terima kasih atas kontribusi Anda.