DataGrid: Fix the column separator position when resizing a column next to a fixed one (T1335911)

e2e/testcafe-devextreme/tests/dataGrid/sticky/common/stickyColumnResizing.ts

@@ -93,6 +93,63 @@ fixture.disablePageReloads`Resize columns - nextColumn mode`
   }));
 });
 
+test.meta({ browserSize: [900, 800] })('The separator should have correct position when resizing fixed column on the right (rtlEnabled = false) (T1335911)', async (t) => {
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const separator = dataGrid.getColumnsSeparator().element;
+  const fixedHeaderCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(23).element;
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await dataGrid.resizeHeader(23, -100, false);
+
+  const fixedCellLeft = await fixedHeaderCell.getBoundingClientRectProperty('left');
+
+  await t
+    .expect(separator.getBoundingClientRectProperty('left'))
+    .within(fixedCellLeft - 1, fixedCellLeft + 1);
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 25),
+  columnAutoWidth: true,
+  allowColumnResizing: true,
+  columnWidth: 200,
+  columnResizingMode: 'nextColumn',
+  customizeColumns: (columns) => {
+    columns[5].fixed = true;
+    columns[5].fixedPosition = 'right';
+    columns[6].fixed = true;
+    columns[6].fixedPosition = 'right';
+  },
+}));
+
+test.meta({ browserSize: [900, 800] })('The separator should have correct position when resizing fixed column on the left (rtlEnabled = true) (T1335911)', async (t) => {
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  const separator = dataGrid.getColumnsSeparator().element;
+  const fixedHeaderCell = dataGrid.getHeaders().getHeaderRow(0).getHeaderCell(23).element;
+
+  await t.expect(dataGrid.isReady()).ok();
+
+  await dataGrid.resizeHeader(23, -100, false, 'right');
+
+  const fixedCellRight = await fixedHeaderCell.getBoundingClientRectProperty('right');
+
+  await t
+    .expect(separator.getBoundingClientRectProperty('left'))
+    .within(fixedCellRight - 1, fixedCellRight + 1);
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 25),
+  rtlEnabled: true,
+  columnAutoWidth: true,
+  allowColumnResizing: true,
+  columnWidth: 200,
+  columnResizingMode: 'nextColumn',
+  customizeColumns: (columns) => {
+    columns[5].fixed = true;
+    columns[5].fixedPosition = 'left';
+    columns[6].fixed = true;
+    columns[6].fixedPosition = 'left';
+  },
+}));
+
 fixture.disablePageReloads`Resize columns - widget mode`
   .page(url(__dirname, '../../../container.html'));
 

packages/devextreme/js/__internal/grids/grid_core/columns_resizing_reordering/m_columns_resizing_reordering.ts

@@ -818,7 +818,8 @@ export class ColumnsResizerViewController extends modules.ViewController {
     return null;
   }
 
-  protected getSeparatorOffsetX($cell: dxElementWrapper): number {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected getSeparatorOffsetX($cell: dxElementWrapper, $nextCell: dxElementWrapper): number {
     const isNextColumnMode = isNextColumnResizingMode(this);
     const rtlEnabled = this.option('rtlEnabled');
     const isRtlParentStyle = this._isRtlParentStyle();
@@ -843,10 +844,12 @@ export class ColumnsResizerViewController extends modules.ViewController {
     if (that._isResizing && that._resizingInfo) {
       if ((parentOffsetLeft <= eventData.x || !isNextColumnMode && isRtlParentStyle) && (!isNextColumnMode || eventData.x <= parentOffsetLeft + getWidth(that._$parentContainer))) {
         if (that._updateColumnsWidthIfNeeded(eventData.x)) {
-          const $cell = that._columnHeadersView.getColumnElements().eq(that._resizingInfo.currentColumnIndex);
+          const $cells = that._columnHeadersView.getColumnElements();
+          const $cell = $cells.eq(that._resizingInfo.currentColumnIndex);
+          const $nextCell = $cells.eq(that._resizingInfo.nextColumnIndex);
 
           if ($cell.length) {
-            const offsetX = this.getSeparatorOffsetX($cell);
+            const offsetX = this.getSeparatorOffsetX($cell, $nextCell);
 
             that._columnsSeparatorView.moveByX(offsetX);
             that._tablePositionController.update(that._targetPoint.y);

packages/devextreme/js/__internal/grids/grid_core/sticky_columns/__tests__/columns_resizing.integration.test.ts

@@ -0,0 +1,101 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+} from '@jest/globals';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+import type { Properties as DataGridProperties } from '@js/ui/data_grid';
+
+import {
+  afterTest,
+  beforeTest,
+  createDataGrid,
+} from '../../__tests__/__mock__/helpers/utils';
+
+const CURRENT_CELL_RECT = { left: 100, width: 300 };
+const NEXT_CELL_RECT = { left: 250, width: 150 };
+
+const mockCellRect = (
+  $cell: dxElementWrapper,
+  { left, width }: { left: number; width: number },
+): dxElementWrapper => {
+  const element = $cell.get(0) as HTMLElement;
+  const rect = {
+    left, right: left + width, width, top: 0, bottom: 0, height: 0,
+  } as DOMRect;
+
+  element.getBoundingClientRect = (): DOMRect => rect;
+  element.getClientRects = (): DOMRectList => [rect] as unknown as DOMRectList;
+
+  return $cell;
+};
+
+const getSeparatorOffsetX = async (options: DataGridProperties): Promise<number> => {
+  const { instance } = await createDataGrid({
+    dataSource: [{
+      id: 1, a: 'a', b: 'b', c: 'c',
+    }],
+    allowColumnResizing: true,
+    ...options,
+  });
+  const columnsResizer = instance.getController('columnsResizer');
+  const $cells = $(instance.getView('columnHeadersView').getColumnElements());
+  const $cell = mockCellRect($cells.eq(1), CURRENT_CELL_RECT);
+  const $nextCell = mockCellRect($cells.eq(2), NEXT_CELL_RECT);
+
+  // @ts-expect-error getSeparatorOffsetX is protected
+  return columnsResizer.getSeparatorOffsetX($cell, $nextCell);
+};
+
+describe('ColumnsResizer separator position with sticky columns (T1335911)', () => {
+  beforeEach(beforeTest);
+  afterEach(afterTest);
+
+  describe('when the next cell is fixed to the right', () => {
+    it('should return the left edge of the next cell', async () => {
+      const offsetX = await getSeparatorOffsetX({
+        columnResizingMode: 'nextColumn',
+        columns: ['a', 'b', { dataField: 'c', fixed: true, fixedPosition: 'right' }],
+      });
+
+      expect(offsetX).toBe(NEXT_CELL_RECT.left);
+    });
+  });
+
+  describe('when the next cell is fixed to the left in RTL', () => {
+    it('should return the right edge of the next cell', async () => {
+      const offsetX = await getSeparatorOffsetX({
+        columnResizingMode: 'nextColumn',
+        rtlEnabled: true,
+        columns: ['a', 'b', { dataField: 'c', fixed: true, fixedPosition: 'left' }],
+      });
+
+      expect(offsetX).toBe(NEXT_CELL_RECT.left + NEXT_CELL_RECT.width);
+    });
+  });
+
+  describe('when the next cell is not fixed', () => {
+    it('should return the right edge of the current cell', async () => {
+      const offsetX = await getSeparatorOffsetX({
+        columnResizingMode: 'nextColumn',
+        columns: [{ dataField: 'a', fixed: true }, 'b', 'c'],
+      });
+
+      expect(offsetX).toBe(CURRENT_CELL_RECT.left + CURRENT_CELL_RECT.width);
+    });
+  });
+
+  describe('when the resizing mode is widget', () => {
+    it('should not take the next fixed cell into account', async () => {
+      const offsetX = await getSeparatorOffsetX({
+        columnResizingMode: 'widget',
+        columns: ['a', 'b', { dataField: 'c', fixed: true, fixedPosition: 'right' }],
+      });
+
+      expect(offsetX).toBe(CURRENT_CELL_RECT.left + CURRENT_CELL_RECT.width);
+    });
+  });
+});

packages/devextreme/js/__internal/grids/grid_core/sticky_columns/__tests__/dom.test.ts

@@ -0,0 +1,115 @@
+import {
+  describe,
+  expect,
+  it,
+} from '@jest/globals';
+import type { dxElementWrapper } from '@js/core/renderer';
+import $ from '@js/core/renderer';
+
+import { GridCoreStickyColumnsDom } from '../dom';
+
+const addWidgetPrefix = (className: string): string => `dx-datagrid-${className}`;
+
+const createElement = (
+  rect: { left: number; right: number },
+  className = '',
+  style: { left?: string; right?: string } = {},
+): dxElementWrapper => {
+  const element = document.createElement('td');
+
+  element.className = className;
+  Object.assign(element.style, style);
+  element.getBoundingClientRect = (): DOMRect => ({
+    ...rect,
+    width: rect.right - rect.left,
+  }) as DOMRect;
+
+  return $(element);
+};
+
+const $container = createElement({ left: 0, right: 600 });
+
+describe('GridCoreStickyColumnsDom.isFixedCellPinnedToLeft', () => {
+  describe('when the cell is fixed to the left', () => {
+    it('should return true', () => {
+      const $cell = createElement({ left: 0, right: 100 }, 'dx-datagrid-sticky-column-left');
+
+      expect(GridCoreStickyColumnsDom.isFixedCellPinnedToLeft($cell, $container, addWidgetPrefix))
+        .toBe(true);
+    });
+  });
+
+  describe('when the sticky cell is pinned to the left', () => {
+    it('should return true', () => {
+      const $cell = createElement({ left: 0, right: 100 }, 'dx-datagrid-sticky-column', { left: '0px' });
+
+      expect(GridCoreStickyColumnsDom.isFixedCellPinnedToLeft($cell, $container, addWidgetPrefix))
+        .toBe(true);
+    });
+  });
+
+  describe('when the sticky cell is not pinned', () => {
+    it('should return false', () => {
+      const $cell = createElement({ left: 200, right: 300 }, 'dx-datagrid-sticky-column', { left: '0px' });
+
+      expect(GridCoreStickyColumnsDom.isFixedCellPinnedToLeft($cell, $container, addWidgetPrefix))
+        .toBe(false);
+    });
+  });
+
+  describe('when the cell is fixed to the right', () => {
+    it('should return false', () => {
+      const $cell = createElement({ left: 500, right: 600 }, 'dx-datagrid-sticky-column-right');
+
+      expect(GridCoreStickyColumnsDom.isFixedCellPinnedToLeft($cell, $container, addWidgetPrefix))
+        .toBe(false);
+    });
+  });
+
+  describe('when the cell is not fixed', () => {
+    it('should return false', () => {
+      const $cell = createElement({ left: 0, right: 100 });
+
+      expect(GridCoreStickyColumnsDom.isFixedCellPinnedToLeft($cell, $container, addWidgetPrefix))
+        .toBe(false);
+    });
+  });
+});
+
+describe('GridCoreStickyColumnsDom.isFixedCellPinnedToRight', () => {
+  describe('when the cell is fixed to the right', () => {
+    it('should return true', () => {
+      const $cell = createElement({ left: 500, right: 600 }, 'dx-datagrid-sticky-column-right');
+
+      expect(GridCoreStickyColumnsDom.isFixedCellPinnedToRight($cell, $container, addWidgetPrefix))
+        .toBe(true);
+    });
+  });
+
+  describe('when the sticky cell is pinned to the right', () => {
+    it('should return true', () => {
+      const $cell = createElement({ left: 500, right: 600 }, 'dx-datagrid-sticky-column', { right: '0px' });
+
+      expect(GridCoreStickyColumnsDom.isFixedCellPinnedToRight($cell, $container, addWidgetPrefix))
+        .toBe(true);
+    });
+  });
+
+  describe('when the sticky cell is not pinned', () => {
+    it('should return false', () => {
+      const $cell = createElement({ left: 200, right: 300 }, 'dx-datagrid-sticky-column', { right: '0px' });
+
+      expect(GridCoreStickyColumnsDom.isFixedCellPinnedToRight($cell, $container, addWidgetPrefix))
+        .toBe(false);
+    });
+  });
+
+  describe('when the cell is fixed to the left', () => {
+    it('should return false', () => {
+      const $cell = createElement({ left: 0, right: 100 }, 'dx-datagrid-sticky-column-left');
+
+      expect(GridCoreStickyColumnsDom.isFixedCellPinnedToRight($cell, $container, addWidgetPrefix))
+        .toBe(false);
+    });
+  });
+});

packages/devextreme/js/__internal/grids/grid_core/sticky_columns/dom.ts

@@ -89,6 +89,13 @@ const isFixedCellPinnedToRight = (
 ): boolean => $cell.hasClass(addWidgetPrefix(CLASSES.stickyColumnRight))
   || isStickyCellPinnedToRight($cell, $container, addWidgetPrefix);
 
+const isFixedCellPinnedToLeft = (
+  $cell: dxElementWrapper,
+  $container: dxElementWrapper,
+  addWidgetPrefix,
+): boolean => $cell.hasClass(addWidgetPrefix(CLASSES.stickyColumnLeft))
+  || isStickyCellPinnedToLeft($cell, $container, addWidgetPrefix);
+
 const isLastLeftFixedCell = (
   $cell: dxElementWrapper,
   addWidgetPrefix,
@@ -359,6 +366,7 @@ export const GridCoreStickyColumnsDom = {
   getNextHeaderCell,
   noNeedToCreateResizingPoint,
   isFixedCellPinnedToRight,
+  isFixedCellPinnedToLeft,
   noNeedToCreateReorderingPoint,
   isFixedCell,
   isStickyCell,

packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts

@@ -531,7 +531,15 @@ const footerView = (
 ) => class FooterViewStickyColumnsExtender extends baseStickyColumns(Base) {};
 
 const columnsResizer = (Base: ModuleType<ColumnsResizerViewController>) => class ColumnResizerStickyColumnsExtender extends Base {
-  protected getSeparatorOffsetX($cell: dxElementWrapper): number {
+  private isNextCellPinned($nextCell: dxElementWrapper, $container: dxElementWrapper): boolean {
+    const addWidgetPrefix = this.addWidgetPrefix.bind(this);
+
+    return this.option('rtlEnabled')
+      ? GridCoreStickyColumnsDom.isFixedCellPinnedToLeft($nextCell, $container, addWidgetPrefix)
+      : GridCoreStickyColumnsDom.isFixedCellPinnedToRight($nextCell, $container, addWidgetPrefix);
+  }
+
+  protected getSeparatorOffsetX($cell: dxElementWrapper, $nextCell: dxElementWrapper): number {
     // @ts-expect-error
     const hasStickyColumns = this._columnHeadersView?.hasStickyColumns();
 
@@ -547,9 +555,16 @@ const columnsResizer = (Base: ModuleType<ColumnsResizerViewController>) => class
       if (isWidgetResizingMode && isFixedCellPinnedToRight) {
         return $cell.offset()?.left ?? 0;
       }
+
+      if (!isWidgetResizingMode && this.isNextCellPinned($nextCell, $container)) {
+        const nextCellOffsetX: number = $nextCell.offset()?.left ?? 0;
+        const nextCellWidth: number = $nextCell[0].getBoundingClientRect().width;
+
+        return this.option('rtlEnabled') ? nextCellOffsetX + nextCellWidth : nextCellOffsetX;
+      }
     }
 
-    return super.getSeparatorOffsetX($cell);
+    return super.getSeparatorOffsetX($cell, $nextCell);
   }
 
   protected _correctColumnIndexForPoint(point, correctionValue: number, columns): void {

packages/testcafe-models/dataGrid/index.ts

@@ -891,7 +891,12 @@ export default class DataGrid extends GridCore {
     )(CLASS.sortableDragging);
   }
 
-  resizeHeader(columnIndex: number, offset: number, needToTriggerPointerUp = true): Promise<void> {
+  resizeHeader(
+    columnIndex: number,
+    offset: number,
+    needToTriggerPointerUp = true,
+    edge: 'left' | 'right' = 'left',
+  ): Promise<void> {
     const { getInstance } = this;
 
     return ClientFunction(
@@ -901,7 +906,8 @@ export default class DataGrid extends GridCore {
         const columnHeadersView = gridInstance.getView('columnHeadersView');
         const $header = $(columnHeadersView.getHeaderElement(columnIndex));
         const headerOffset = $header.offset();
-        const offsetX = headerOffset.left;
+        const headerWidth = edge === 'right' ? $header[0].getBoundingClientRect().width : 0;
+        const offsetX = headerOffset.left + headerWidth;
 
         triggerPointerMove($(document), offsetX, headerOffset.top + 1);
         triggerPointerDown($gridElement, offsetX, headerOffset.top + 1);
@@ -920,6 +926,7 @@ export default class DataGrid extends GridCore {
           columnIndex,
           offset,
           needToTriggerPointerUp,
+          edge,
         },
       },
     )();