diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1179218-virtual-scrolling-dragging-row.png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1179218-virtual-scrolling-dragging-row.png new file mode 100644 index 000000000000..8589e6a23c37 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1179218-virtual-scrolling-dragging-row.png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1179218-virtual-scrolling-dragging-row_mask.png b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1179218-virtual-scrolling-dragging-row_mask.png new file mode 100644 index 000000000000..e215f875b597 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/etalons/T1179218-virtual-scrolling-dragging-row_mask.png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/rowDragging.ts b/e2e/testcafe-devextreme/tests/dataGrid/rowDragging.ts index 74300717840d..1ab63f39c413 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/rowDragging.ts +++ b/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', + }, + }); +}); diff --git a/packages/devextreme/js/__internal/m_sortable.ts b/packages/devextreme/js/__internal/m_sortable.ts index 0c9bcab4c886..781a83d89ebf 100644 --- a/packages/devextreme/js/__internal/m_sortable.ts +++ b/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 }, })); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/sortable.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/sortable.tests.js index 981ff9475d8d..b15d8eb9abd1 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/sortable.tests.js +++ b/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'); }); });