DataGrid: Fix rows overlapping each other when dragging when virtual …

…scrolling is enabled and rowDragging.dropFeedbackMode = "push"' (T1179218) (DevExpress#27181)

Co-authored-by: Alyar <>

e2e/testcafe-devextreme/tests/dataGrid/rowDragging.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { ClientFunction, Selector } from 'testcafe';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid, { CLASS as DataGridClassNames } from 'devextreme-testcafe-models/dataGrid';
 import { ClassNames } from 'devextreme-testcafe-models/dataGrid/classNames';
 import { MouseUpEvents, MouseAction } from '../../helpers/mouseUpEvents';
@@ -743,3 +744,40 @@ safeSizeTest('Item should appear in a correct spot when dragging to a different
     showBorders: true,
   });
 });
+
+// T1179218
+safeSizeTest('Rows should appear correctly during dragging when virtual scrolling is enabled and rowDragging.dropFeedbackMode = "push"', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  // drag the row down
+  await dataGrid.moveRow(0, 30, 150, true);
+  await dataGrid.moveRow(0, 30, 350);
+
+  // waiting for autoscrolling
+  await t.wait(2000);
+
+  // drag the row up
+  await dataGrid.moveRow(0, 30, 75);
+
+  await t
+    .expect(await takeScreenshot('T1179218-virtual-scrolling-dragging-row.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async (t) => {
+  await t.maximizeWindow();
+  return createWidget('dxDataGrid', {
+    height: 440,
+    keyExpr: 'id',
+    scrolling: {
+      mode: 'virtual',
+    },
+    dataSource: [...new Array(100)].fill(null).map((_, index) => ({ id: index })),
+    columns: ['id'],
+    rowDragging: {
+      allowReordering: true,
+      dropFeedbackMode: 'push',
+    },
+  });
+});

packages/devextreme/js/__internal/m_sortable.ts

@@ -13,6 +13,8 @@ import { getWindow } from '@js/core/utils/window';
 import eventsEngine from '@js/events/core/events_engine';
 import Draggable from '@ts/m_draggable';
 
+import { isDefined } from '../core/utils/type';
+
 const window = getWindow();
 
 const SORTABLE = 'dxSortable';
@@ -881,7 +883,7 @@ const Sortable = Draggable.inherit({
 
       if (toIndex === null || fromIndex === null) {
         stopAnimation(itemElement);
-      } else if (prevPosition !== position || fullUpdate && position) {
+      } else if (prevPosition !== position || (fullUpdate && isDefined(position))) {
         animate(itemElement, extend({}, animationConfig, {
           to: { [positionPropName]: !isVerticalOrientation && rtlEnabled ? -position : position },
         }));

packages/devextreme/testing/tests/DevExpress.ui.widgets/sortable.tests.js

@@ -3971,9 +3971,9 @@ QUnit.module('update', moduleConfig, () => {
         sortable.update();
 
         // assert
-        assert.equal(getElement(0).get(0).style.transform, '', 'item 1 is not moved');
+        assert.equal(getElement(0).get(0).style.transform, browser.mozilla ? 'translate(0px)' : 'translate(0px, 0px)', 'item 1 is not moved');
         assert.equal(getElement(1).get(0).style.transform, 'translate(0px, -30px)', 'item 2 is not moved');
-        assert.equal(getElement(2).get(0).style.transform, '', 'item 3 is not moved');
+        assert.equal(getElement(2).get(0).style.transform, browser.mozilla ? 'translate(0px)' : 'translate(0px, 0px)', 'item 3 is not moved');
     });
 
     QUnit.test('placeholder should be updated if dropFeedbackMode is indicate', function(assert) {
@@ -4006,9 +4006,9 @@ QUnit.module('update', moduleConfig, () => {
         sortable.update();
 
         // assert
-        assert.equal(getElement(0).get(0).style.transform, '', 'item 1 is not moved');
+        assert.equal(getElement(0).get(0).style.transform, browser.mozilla ? 'translate(0px)' : 'translate(0px, 0px)', 'item 1 is not moved');
         assert.equal(getElement(1).get(0).style.transform, 'translate(0px, -30px)', 'item 2 is moved');
-        assert.equal(getElement(2).get(0).style.transform, '', 'item 3 is not moved');
+        assert.equal(getElement(2).get(0).style.transform, browser.mozilla ? 'translate(0px)' : 'translate(0px, 0px)', 'item 3 is not moved');
     });
 
     QUnit.test('items should be moved correctly if offset is increased', function(assert) {
@@ -4025,7 +4025,7 @@ QUnit.module('update', moduleConfig, () => {
         // assert
         assert.equal(getElement(0).get(0).style.transform, 'translate(0px, -30px)', 'item 1 is moved');
         assert.equal(getElement(1).get(0).style.transform, 'translate(0px, -30px)', 'item 2 is moved');
-        assert.equal(getElement(2).get(0).style.transform, '', 'item 3 is not moved');
+        assert.equal(getElement(2).get(0).style.transform, browser.mozilla ? 'translate(0px)' : 'translate(0px, 0px)', 'item 3 is not moved');
     });
 
     QUnit.test('items should be moved correctly if offset is decreased', function(assert) {
@@ -4040,8 +4040,8 @@ QUnit.module('update', moduleConfig, () => {
         sortable.update();
 
         // assert
-        assert.equal(getElement(0).get(0).style.transform, '', 'item 1 is not moved');
-        assert.equal(getElement(1).get(0).style.transform, '', 'item 2 is not moved');
+        assert.equal(getElement(0).get(0).style.transform, browser.mozilla ? 'translate(0px)' : 'translate(0px, 0px)', 'item 1 is not moved');
+        assert.equal(getElement(1).get(0).style.transform, browser.mozilla ? 'translate(0px)' : 'translate(0px, 0px)', 'item 2 is not moved');
         assert.equal(getElement(2).get(0).style.transform, 'translate(0px, 30px)', 'item 3 is moved');
     });
 });