DataGrid(T1278804): bounces to the top on an attempt to scroll down when an adaptive row is expanded and virtual scrolling is enabled (DevExpress#30716)

Author: wdevfx

e2e/testcafe-devextreme/tests/dataGrid/common/scrolling.ts

@@ -20,12 +20,12 @@ async function getRightScrollOffset(dataGrid: DataGrid): Promise<number> {
   return maxHorizontalOffset - scrollLeft;
 }
 
-function getData(rowCount, colCount): Record<string, string>[] {
+function getData(rowCount: number, colCount: number): Record<string, string>[] {
   const items: Record<string, string>[] = [];
   for (let i = 0; i < rowCount; i += 1) {
     const item: Record<string, string> = {};
     for (let j = 0; j < colCount; j += 1) {
-      item[`field_${i}_${j}`] = `val_${i}_${j}`;
+      item[`field_${j}`] = `val_${i}_${j}`;
     }
     items.push(item);
   }
@@ -1824,3 +1824,62 @@ test('DataGrid - Scrolling position is reset to far right on an attempt to scrol
     enabled: false,
   },
 }));
+
+[true, false].forEach((nativeScroll) => {
+  type TestCaseWindow = typeof window & { dataGridScrollableEventValues?: number[] };
+
+  test(
+    `Should not scroll back on top with virtual scrolling and adaptive master detail (nativeScroll: ${nativeScroll}) [T1278804]`,
+    async (t) => {
+    // NOTE: idx + 1 logic inside POM
+      const adaptiveCellIdx = 101;
+      const scrollValuesThreshold = 100;
+
+      const dataGrid = new DataGrid('#container');
+      const firstRow = dataGrid.getDataRow(0);
+      const firstDataCell = firstRow.getDataCell(0);
+      const adaptiveCell = firstRow.getCommandCell(adaptiveCellIdx);
+      const scrollContainer = dataGrid.getScrollContainer();
+
+      await t
+        .click(firstDataCell.element)
+        .click(adaptiveCell.element);
+
+      await t
+        .scroll(scrollContainer, 0, 1000)
+        .scroll(scrollContainer, 0, 1000);
+
+      const scrollOffsets = await t
+        .eval(() => (window as TestCaseWindow).dataGridScrollableEventValues) as number[];
+
+      const hasSmallScrollValues = scrollOffsets.some((offset) => offset < scrollValuesThreshold);
+      await t.expect(hasSmallScrollValues).notOk();
+    },
+  ).before(async () => {
+    await createWidget('dxDataGrid', {
+      dataSource: getData(3, 100).map((item, idx) => ({ ...item, id: idx })),
+      keyExpr: 'id',
+      columnHidingEnabled: true,
+      focusedRowEnabled: true,
+      scrolling: {
+        mode: 'virtual',
+        useNative: nativeScroll,
+      },
+      onContentReady: ({ component }) => {
+        const testWindow = window as TestCaseWindow;
+
+        component.getScrollable().on('scroll', ({ scrollOffset: { top } }) => {
+          if (!Array.isArray(testWindow.dataGridScrollableEventValues)) {
+            testWindow.dataGridScrollableEventValues = [];
+          }
+
+          testWindow.dataGridScrollableEventValues.push(top);
+        });
+      },
+      width: 400,
+      height: 400,
+    });
+  }).after(async (t) => t.eval(() => {
+    delete (window as TestCaseWindow).dataGridScrollableEventValues;
+  }));
+});

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts

@@ -3006,7 +3006,9 @@ const adaptiveColumns = (Base: ModuleType<AdaptiveColumnsController>) => class A
   protected _hideVisibleColumnInView({ view, isCommandColumn, visibleIndex }) {
     super._hideVisibleColumnInView({ view, isCommandColumn, visibleIndex });
     if (view.name === ROWS_VIEW) {
-      this._rowsView.renderFocusState(null);
+      this._rowsView.renderFocusState({
+        preventScroll: shouldPreventScroll(this),
+      });
     }
   }
 };