From c81301daf6bdca334c4b5d9c4b7e30a05f248bcf Mon Sep 17 00:00:00 2001 From: Mark Allen Ramirez Date: Wed, 22 Apr 2026 12:41:10 +0800 Subject: [PATCH] DataGrid - Focused cell highlight on sticky columns is still visible even when the focused cell is outside the viewport (T1310313) (#33284) (cherry picked from commit d6d7580a7497c5c7930471ca93795192e4de20d0) --- .../dataGrid/sticky/common/withEditing.ts | 60 ++++++++++--------- .../sticky_columns/m_sticky_columns.ts | 5 -- 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withEditing.ts b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withEditing.ts index d72254701bc8..8224ad4294fe 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withEditing.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/sticky/common/withEditing.ts @@ -1,5 +1,6 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import DataGrid from 'devextreme-testcafe-models/dataGrid'; +import type { DataRenderMode } from 'devextreme/ui/data_grid'; import { createWidget } from '../../../../helpers/createWidget'; import url from '../../../../helpers/getPageUrl'; import { defaultConfig } from '../helpers/data'; @@ -333,31 +334,34 @@ test.meta({ browserSize: [800, 800] })('The cell edit mode: The validation messa }, })); -test.meta({ browserSize: [800, 800] })('The cell edit mode: The focus overlay element should scroll vertically', async (t) => { - const { takeScreenshot, compareResults } = createScreenshotsComparer(t); - const dataGrid = new DataGrid(DATA_GRID_SELECTOR); - - await t.expect(dataGrid.isReady()).ok(); - - await t.click(dataGrid.getDataCell(5, 0).element); - - await testScreenshot(t, takeScreenshot, 'vertical_scroll_and_focused_fixed_column_1.png', { element: dataGrid.element }); - - await dataGrid.scrollTo(t, { y: 10000 }); - - await testScreenshot(t, takeScreenshot, 'vertical_scroll_and_focused_fixed_column_2.png', { element: dataGrid.element }); - - await t - .expect(compareResults.isValid()) - .ok(compareResults.errorMessages()); -}).before(async () => createWidget('dxDataGrid', { - ...defaultConfig, - editing: { - mode: 'cell', - allowUpdating: true, - }, - scrolling: { - showScrollbar: 'never', - }, - columnWidth: 200, -})); +(['standard', 'virtual'] as DataRenderMode[]).forEach((rowRenderingMode) => { + test.meta({ browserSize: [800, 800] })(`The cell edit mode: The focus overlay element should scroll vertically (rowRenderingMode=${rowRenderingMode})`, async (t) => { + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const dataGrid = new DataGrid(DATA_GRID_SELECTOR); + + await t.expect(dataGrid.isReady()).ok(); + + await t.click(dataGrid.getDataCell(5, 0).element); + + await testScreenshot(t, takeScreenshot, 'vertical_scroll_and_focused_fixed_column_1.png', { element: dataGrid.element }); + + await dataGrid.scrollTo(t, { y: 10000 }); + + await testScreenshot(t, takeScreenshot, 'vertical_scroll_and_focused_fixed_column_2.png', { element: dataGrid.element }); + + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); + }).before(async () => createWidget('dxDataGrid', { + ...defaultConfig, + editing: { + mode: 'cell', + allowUpdating: true, + }, + scrolling: { + showScrollbar: 'never', + rowRenderingMode, + }, + columnWidth: 200, + })); +}); diff --git a/packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts b/packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts index d9cdcf8485d8..b5760009f563 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts @@ -746,11 +746,6 @@ const editorFactory = (Base: ModuleType) => class EditorFactorySt return this.getOverlayContainerIfNeeded($cell) ?? super.getRevertButtonContainer($cell); } - protected getFocusOverlayContainer($focusedElement: dxElementWrapper): dxElementWrapper { - return this.getOverlayContainerIfNeeded($focusedElement) - ?? super.getFocusOverlayContainer($focusedElement); - } - protected overlayPositionedHandler(e, isOverlayVisible: boolean): void { const columnHeaders = this.getView('columnHeadersView'); // @ts-expect-error