wavesurfer-react with react-beautiful-dnd issue about wavesurfer-react HOT 5 CLOSED

Hi! It maybe that I would need a code sandbox replicating this issue to help you in an more effective way.

from wavesurfer-react.

Hi,
Currently, I'm waiting for DND staff to solve my issue here:
atlassian/react-beautiful-dnd#2526

My demo is incomplete here: https://codesandbox.io/s/wavesurfer-react-2-0-forked-m67kpp
For some reason, it doesn't update the list.

I need more time to further investigate.

from wavesurfer-react.

I will try to dive into your issue tomorrow or this Saturday

from wavesurfer-react.

Thanks,
In the meantime, I found this ugly fix:

setTimeout(() => {
    var container = document.getElementById(waveformId);

    var canvas;
    if (container && container.getElementsByTagName) {
        var canvases = container.getElementsByTagName('canvas');
        if (canvases.length > 0) {
            canvas = canvases[0];
        }
    }
    if (canvas) {
        var event = new MouseEvent('click', {
            'view': window,
            'bubbles': true,
            'cancelable': true,
            'clientX': 1,
            'clientY': 1
        });
        canvas.dispatchEvent(event);
    }

}, 150);

Again, this happens only when I use preloaded JSON data from state inside a form using react-final-form with react-final-form-array.

P.S.
I don't know why the DND plugin doesn't work in my Codesandbox example, but locally, in my app, it works, so I'm in difficult just to show you the bug encountered.

from wavesurfer-react.

I will close it as it's depending on other 3 libraries and it seems there is problem in rendering logic, because I tried to manipulate somehow with this and it seems that after reordering WaveSurfer component finds divs it want, but these divs are not presented in HTML structure anymore.

Also, it seems that fields are actually reordered because fields are changed and if using field.value it's seen there.

https://codesandbox.io/p/sandbox/wavesurfer-react-2-0-forked-tkyhl2?file=%2Fsrc%2FWavesurfer.jsx%3A126%2C47

from wavesurfer-react.