DataGrid/TreeList - Sticky Columns: Adapt the keyboard navigation feature

e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/stickyColumnReordering.ts

@@ -51,6 +51,9 @@ safeSizeTest('Move right fixed column to the left', async (t) => {
   // act
   await t.drag(dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(24).element, -400, 0);
 
+  // TODO: issue will be fixed in the card 7Mct6tJU
+  await dataGrid.scrollTo(t, { x: 0 });
+
   await takeScreenshot('move_right_fixed_column_to_left.png', dataGrid.element);
 
   // assert
@@ -155,6 +158,9 @@ safeSizeTest('Move right fixed band column to the left', async (t) => {
   // act
   await t.drag(dataGrid.getHeaders().getHeaderRow(1).getHeaderCell(3).element, -500, 0);
 
+  // TODO: issue will be fixed in the card 7Mct6tJU
+  await dataGrid.scrollTo(t, { x: 0 });
+
   await takeScreenshot('move_right_fixed_band_column_to_left.png', dataGrid.element);
 
   // assert

e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/withKeyboardNavigation.ts

@@ -0,0 +1,264 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { ClientFunction } from 'testcafe';
+import { safeSizeTest } from '../../../helpers/safeSizeTest';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+import { defaultConfig } from './data';
+
+function getScrollPadding(scrollContainer, paddingSide): Promise<string> {
+  return ClientFunction((element, side) => element().style[`scrollPadding${side}`])(scrollContainer, paddingSide);
+}
+
+function cellIsVisibleInViewport(cell, scrollContainer): Promise<boolean> {
+  return ClientFunction((element, container) => {
+    const cellElement = element();
+    const cellRect = cellElement.getBoundingClientRect();
+    const scrollContainerElement = container();
+    const scrollPaddingLeft = parseFloat(scrollContainerElement.style.scrollPaddingLeft);
+    const scrollPaddingRight = parseFloat(scrollContainerElement.style.scrollPaddingRight);
+    const {
+      left: scrollContainerOffsetLeft,
+      right: scrollContainerOffsetRight,
+    }: { left: number; right: number } = scrollContainerElement.getBoundingClientRect();
+
+    if (cellRect.right < (scrollContainerOffsetLeft + scrollPaddingLeft)) {
+      return false;
+    }
+
+    if (cellRect.left > (scrollContainerOffsetRight - scrollPaddingRight)) {
+      return false;
+    }
+
+    return true;
+  })(cell, scrollContainer);
+}
+
+const navigateToNextCell = async (t, $headerCell, scrollContainer) => {
+  // act
+  await t
+    .pressKey('tab');
+
+  // assert
+  await t
+    .expect($headerCell.isFocused)
+    .ok()
+    .expect(cellIsVisibleInViewport($headerCell.element, scrollContainer))
+    .ok();
+};
+
+const navigateToPrevCell = async (t, $headerCell, scrollContainer) => {
+  // act
+  await t
+    .pressKey('shift+tab');
+
+  // assert
+  await t
+    .expect($headerCell.isFocused)
+    .ok()
+    .expect(cellIsVisibleInViewport($headerCell.element, scrollContainer))
+    .ok();
+};
+
+const checkScrollPadding = async (
+  t,
+  scrollContainer,
+  scrollPaddingLeft,
+  scrollPaddingRight,
+) => {
+  // assert
+  await t
+    .expect(getScrollPadding(scrollContainer, 'Left'))
+    .eql(scrollPaddingLeft)
+    .expect(getScrollPadding(scrollContainer, 'Right'))
+    .eql(scrollPaddingRight);
+};
+
+const DATA_GRID_SELECTOR = '#container';
+
+fixture.disablePageReloads`Fixed Columns - keyboard navigation`
+  .page(url(__dirname, '../../container.html'));
+
+safeSizeTest('Headers navigation by Tab key when there are fixed columns', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const headers = dataGrid.getHeaders();
+  const headersScrollContainer = headers.getContent();
+  const headerRow = headers.getHeaderRow(0);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // assert
+  await checkScrollPadding(t, headersScrollContainer, '130px', '285px');
+
+  // act
+  await t.click(headerRow.getHeaderCell(0).element);
+
+  // assert
+  await t
+    .expect(headerRow.getHeaderCell(0).isFocused)
+    .ok();
+
+  // act
+  await navigateToNextCell(t, headerRow.getHeaderCell(1), headersScrollContainer);
+  await navigateToNextCell(t, headerRow.getHeaderCell(2), headersScrollContainer);
+  await navigateToNextCell(t, headerRow.getHeaderCell(3), headersScrollContainer);
+
+  // assert
+  await checkScrollPadding(t, headersScrollContainer, '130px', '160px');
+
+  await takeScreenshot('fixed_columns_headers_navigation_by_tab_1.png', dataGrid.element);
+
+  // act
+  await navigateToNextCell(t, headerRow.getHeaderCell(4), headersScrollContainer);
+  await navigateToNextCell(t, headerRow.getHeaderCell(5), headersScrollContainer);
+  await navigateToNextCell(t, headerRow.getHeaderCell(6), headersScrollContainer);
+
+  // assert
+  await checkScrollPadding(t, headersScrollContainer, '255px', '160px');
+
+  await takeScreenshot('fixed_columns_headers_navigation_by_tab_2.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [900, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  width: 550,
+  customizeColumns(columns) {
+    columns[4].width = 125;
+    columns[4].fixed = true;
+    columns[4].fixedPosition = 'sticky';
+  },
+}));
+
+safeSizeTest('Headers navigation by Shift and Tab keys when there are fixed columns', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const headers = dataGrid.getHeaders();
+  const headersScrollContainer = headers.getContent();
+  const headerRow = headers.getHeaderRow(0);
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // assert
+  await checkScrollPadding(t, headersScrollContainer, '130px', '285px');
+
+  // act
+  await t.click(headerRow.getHeaderCell(6).element);
+
+  // assert
+  await t
+    .expect(headerRow.getHeaderCell(6).isFocused)
+    .ok();
+
+  // act
+  await navigateToPrevCell(t, headerRow.getHeaderCell(5), headersScrollContainer);
+
+  // assert
+  await checkScrollPadding(t, headersScrollContainer, '130px', '160px');
+
+  await takeScreenshot('fixed_columns_headers_navigation_by_shift_and_tab_1.png', dataGrid.element);
+
+  // act
+  await navigateToPrevCell(t, headerRow.getHeaderCell(4), headersScrollContainer);
+  await navigateToPrevCell(t, headerRow.getHeaderCell(3), headersScrollContainer);
+  await navigateToPrevCell(t, headerRow.getHeaderCell(2), headersScrollContainer);
+  await navigateToPrevCell(t, headerRow.getHeaderCell(1), headersScrollContainer);
+  await navigateToPrevCell(t, headerRow.getHeaderCell(0), headersScrollContainer);
+
+  // assert
+  await checkScrollPadding(t, headersScrollContainer, '130px', '285px');
+
+  await takeScreenshot('fixed_columns_headers_navigation_by_shift_and_tab_2.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [900, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  width: 625,
+  customizeColumns(columns) {
+    columns[4].width = 125;
+    columns[4].fixed = true;
+    columns[4].fixedPosition = 'sticky';
+  },
+}));
+
+safeSizeTest('Data cells navigation by Tab key when there are fixed columns', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const scrollContainer = dataGrid.getScrollContainer();
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // act
+  await t.click(dataGrid.getDataCell(0, 0).element);
+  await navigateToNextCell(t, dataGrid.getDataCell(0, 1), scrollContainer);
+  await navigateToNextCell(t, dataGrid.getDataCell(0, 2), scrollContainer);
+  await navigateToNextCell(t, dataGrid.getDataCell(0, 3), scrollContainer);
+
+  await takeScreenshot('fixed_columns_data_cells_navigation_by_tab_1.png', dataGrid.element);
+
+  // act
+  await navigateToNextCell(t, dataGrid.getDataCell(0, 4), scrollContainer);
+  await navigateToNextCell(t, dataGrid.getDataCell(0, 5), scrollContainer);
+  await navigateToNextCell(t, dataGrid.getDataCell(0, 6), scrollContainer);
+
+  await takeScreenshot('fixed_columns_data_cells_navigation_by_tab_2.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [900, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  width: 550,
+  customizeColumns(columns) {
+    columns[4].width = 125;
+    columns[4].fixed = true;
+    columns[4].fixedPosition = 'sticky';
+  },
+}));
+
+safeSizeTest('Data cells navigation by Shift and Tab keys when there are fixed columns', async (t) => {
+  // arrange
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const scrollContainer = dataGrid.getScrollContainer();
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  // act
+  await t.click(dataGrid.getDataCell(0, 6).element);
+  await navigateToPrevCell(t, dataGrid.getDataCell(0, 5), scrollContainer);
+  await navigateToPrevCell(t, dataGrid.getDataCell(0, 4), scrollContainer);
+
+  await takeScreenshot('fixed_columns_data_cells_navigation_by_shift_and_tab_1.png', dataGrid.element);
+
+  // act
+  await navigateToPrevCell(t, dataGrid.getDataCell(0, 3), scrollContainer);
+  await navigateToPrevCell(t, dataGrid.getDataCell(0, 2), scrollContainer);
+  await navigateToPrevCell(t, dataGrid.getDataCell(0, 1), scrollContainer);
+  await navigateToPrevCell(t, dataGrid.getDataCell(0, 0), scrollContainer);
+
+  await takeScreenshot('fixed_columns_data_cells_navigation_by_shift_and_tab_2.png', dataGrid.element);
+
+  // assert
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [900, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  width: 550,
+  customizeColumns(columns) {
+    columns[3].width = 125;
+    columns[3].fixed = true;
+    columns[3].fixedPosition = 'sticky';
+  },
+}));

packages/devextreme/js/__internal/grids/grid_core/column_fixing/m_column_fixing.ts

@@ -1025,8 +1025,10 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewFixedColumnsExten
     super._afterRowPrepared(e);
   }
 
-  public _scrollToElement($element) {
-    super._scrollToElement($element, this.getFixedColumnsOffset());
+  public _scrollToElement($element, offset?) {
+    const scrollOffset = this.isFixedColumns() ? this.getFixedColumnsOffset() : offset;
+
+    super._scrollToElement($element, scrollOffset);
   }
 };
 

packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter.ts

@@ -321,7 +321,6 @@ export class HeaderFilterController extends Modules.ViewController {
       // TODO getView
       const view = isGroupPanel ? this.getView('headerPanel') : this.getView('columnHeadersView');
       const $columnElement = view.getColumnElements()
-        // @ts-expect-error
         .eq(isGroupPanel ? column.groupIndex : visibleIndex);
 
       this.showHeaderFilterMenuBase({