Rows cannot be moved in a table with a scrollbar

[piroor]

Describe the bug

Rows cannot be rearranged via drag and drop if a table rendered with the virtual DOM and there are large number rows and the table is scrollable.

Tabulator Info

• Tabulator 4.9.3

Working Example

https://jsfiddle.net/piro_or/w5cadgsz/5/

To Reproduce

1. Go to https://jsfiddle.net/piro_or/w5cadgsz/5/
2. Press the mouse button on the row "data-3".
3. Keep the button pressed and move your mouse up or down.
4. The row "data-3" suddenly fixed to the top of the table, and the row "data-0" become invisible. The row below the mouse cursor becomes blank, and the blank row moves following to the mouse cursor.

   • Google Chrome reports an error in the console:

     tabulator.min.js:11 Uncaught TypeError: Cannot read property 'mousemove' of undefined
         at tabulator.min.js:11
         at Array.forEach (<anonymous>)
         at O._bindMouseMove (tabulator.min.js:11)
         at O.startMove (tabulator.min.js:11)
         at tabulator.min.js:11

   • Mozilla Firefox reports an error in the console:

     Uncaught TypeError: e.modules.moveRow is undefined
         _bindMouseMove https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:11
         _bindMouseMove https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:11
         startMove https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:11
         checkTimeout https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:11
         setTimeout handler*O.prototype.initializeRow/< https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:11
         initializeRow https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:11
         generateElement https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:4
         create https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:4
         getElement https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:4
         styleRow https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:3
         _virtualRenderFill https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:3
         renderTable https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:3
         refreshActiveData https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:3
         _setDataActual https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:3
         setData https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:3
         setData https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:3
         _loadInitialData https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:5
         _create https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:5
         e https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js:5
         <anonymous> https://fiddle.jshell.net/_display/?editor_console=true:121

5. Release the mouse button on the table.
6. The dragging mode is still active. The blank row still moves following to the mouse cursor.

Expected behavior

• At the step 4, the row "data-3" is expected to follow the mouse cursor and moved in the table.
• At the step 6, the dragging mode is expected to be finished.

Screenshots

A screenshot at the step 4.

Desktop (please complete the following information):

• OS: Windows 10 Pro
• Browser and version: Mozilla Firefox 87.0, Google Chrome 89.0.4389.90

[piroor]

On Firefox case the error looks to be thrown at

tabulator/src/js/modules/moveable_rows.js

Line 247 in 7579920

if((row.type === "row" || row.type === "group") && row.modules.moveRow.mousemove){

[olifolkerd]

Hey @piroor

Thanks for letting me know, i will have a look into that further.

Cheers

Oli :)

[MatthewJJohnson]

Hi Oli,

I was able to reproduce this in Tabulator 4.9.3, even without a vertical scrollbar being present on the table. A rowMove event will complete visually if a scroll action has not yet occurred since the last redraw, but before the completion of the rowMove callback the console will still report
Uncaught TypeError: Cannot read property 'insertBefore' of null at O.endMove (tabulator.min.js:11) at e.rowMoved ((index):491) at s.moveRow (tabulator.min.js:3) at O.endMove (tabulator.min.js:11)

[jjsiman]

Hello,

Any updates on this bugfix? Would really appreciate a solution to get this working, I've had a customer bring this up several times.

[olifolkerd]

Hey All,

This appears to have been resolved in the 5.x release.

Cheers

Oli :)

[piroor]

Thanks! I'll try 5.x next year.

[adarshk]

@olifolkerd I am not sure if the fix is behaving as expected? I forked the OPs example and updated it to use 5.1.0 - https://jsfiddle.net/adarshk/kdpn4tsz/4/

The drag seems to work in a weird way. When I think of drag, I think of something similar to https://react-beautiful-dnd.netlify.app/?path=/story/virtual-react-virtualized--list

But what happens is - when holding an item to drag, it only scrolls if you drag to the bottom and then let go and then scrolling manually to the desired position and then letting go again. Not sure how to demonstrate the behavior other than trying out the fiddle and then dragging a top item to the bottom of the list.

Do you think I am doing something wrong with that or is that how it is behaving?