DataGrid: Fix separator position during column resizing

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

@@ -1,10 +1,15 @@
+import { ClientFunction } from 'testcafe';
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import DataGrid from 'devextreme-testcafe-models/dataGrid';
 import { safeSizeTest } from '../../../helpers/safeSizeTest';
 import { createWidget } from '../../../helpers/createWidget';
 import { getData } from '../helpers/generateDataSourceData';
 import url from '../../../helpers/getPageUrl';
 
+const scrollTo = ClientFunction((x = 0, y = 0) => {
+  window.scrollTo(x, y);
+});
+
 const DATA_GRID_SELECTOR = '#container';
 
 fixture.disablePageReloads`Resize columns - nextColumn mode`
@@ -205,4 +210,81 @@ fixture.disablePageReloads`Resize columns - widget mode`
       columns[6].fixedPosition = 'right';
     },
   }));
+
+  safeSizeTest(`The separator should have correct position when resizing fixed column on the right (rtlEnabled = ${rtlEnabled})`, async (t) => {
+    // arrange
+    const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const columnIndex = rtlEnabled ? 1 : 23;
+
+    await t.expect(dataGrid.isReady()).ok();
+
+    // act
+    await dataGrid.resizeHeader(columnIndex, -100, false);
+
+    await takeScreenshot(`separator_position_with_fixed_column_on_right_(widget_mode_and_rtl_=_${rtlEnabled}).png`, dataGrid.element);
+
+    // assert
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }, [900, 800]).before(async () => createWidget('dxDataGrid', {
+    dataSource: getData(5, 25),
+    rtlEnabled,
+    columnAutoWidth: true,
+    allowColumnResizing: true,
+    columnWidth: 200,
+    columnResizingMode: 'widget',
+    customizeColumns: (columns) => {
+      columns[5].fixed = true;
+      columns[5].fixedPosition = 'right';
+      columns[6].fixed = true;
+      columns[6].fixedPosition = 'right';
+    },
+  }));
+
+  safeSizeTest(`The separator should have correct position when there is window scrollTop (rtlEnabled = ${rtlEnabled})`, async (t) => {
+    // arrange
+    const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const columnIndex = rtlEnabled ? 1 : 23;
+
+    await t.expect(dataGrid.isReady()).ok();
+
+    // act
+    await scrollTo(0, 1000);
+    await dataGrid.resizeHeader(columnIndex, -100, false);
+
+    await takeScreenshot(`separator_position_with_window_scroll_top_(widget_mode_and_rtl_=_${rtlEnabled}).png`, dataGrid.element);
+
+    // assert
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }, [900, 800])
+    .before(async () => {
+      await ClientFunction(() => {
+        $('#container').css('margin-top', '800px');
+      })();
+
+      await createWidget('dxDataGrid', {
+        dataSource: getData(5, 25),
+        rtlEnabled,
+        columnAutoWidth: true,
+        allowColumnResizing: true,
+        columnWidth: 200,
+        columnResizingMode: 'widget',
+        customizeColumns: (columns) => {
+          columns[5].fixed = true;
+          columns[5].fixedPosition = 'right';
+          columns[6].fixed = true;
+          columns[6].fixedPosition = 'right';
+        },
+      });
+    })
+    .after(async () => {
+      await ClientFunction(() => {
+        $('#container').css('margin-top', '');
+      })();
+    });
 });

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

@@ -754,6 +754,16 @@ export class ColumnsResizerViewController extends modules.ViewController {
     return null;
   }
 
+  protected getSeparatorOffsetX($cell: dxElementWrapper): number {
+    const isNextColumnMode = isNextColumnResizingMode(this);
+    const rtlEnabled = this.option('rtlEnabled');
+    const isRtlParentStyle = this._isRtlParentStyle();
+    const outerWidth: number = $cell[0].getBoundingClientRect().width;
+    const cellOffset: number = $cell.offset()?.left ?? 0;
+
+    return cellOffset + ((isNextColumnMode || isRtlParentStyle) && rtlEnabled ? 0 : outerWidth);
+  }
+
   private _moveSeparator(args) {
     const e = args.event;
     const that = e.data;
@@ -763,18 +773,18 @@ export class ColumnsResizerViewController extends modules.ViewController {
     const parentOffset = that._$parentContainer.offset();
     const parentOffsetLeft = parentOffset.left;
     const eventData = getEventData(e);
-    const rtlEnabled = that.option('rtlEnabled');
     const isRtlParentStyle = this._isRtlParentStyle();
     const isDragging = that._draggingHeaderView?.isDragging();
 
     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 cell = $cell[0];
-          if (cell) {
-            const outerWidth = cell.getBoundingClientRect().width;
-            that._columnsSeparatorView.moveByX($cell.offset().left + ((isNextColumnMode || isRtlParentStyle) && rtlEnabled ? 0 : outerWidth));
+
+          if ($cell.length) {
+            const offsetX = this.getSeparatorOffsetX($cell);
+
+            that._columnsSeparatorView.moveByX(offsetX);
             that._tablePositionController.update(that._targetPoint.y);
             e.preventDefault();
           }

packages/devextreme/js/__internal/grids/grid_core/m_utils.ts

@@ -443,32 +443,37 @@ export default {
   getPointsByColumns(items, pointCreated, isVertical?, startColumnIndex = 0, needToCheckPrevPoint = false) {
     const result: any[] = [];
     const cellsLength: number = items.length;
-    let item;
-    let offset;
+    let $item;
+    let offset: { left: number; top: number } = { left: 0, top: 0 };
+    let itemRect: { width: number; height: number } = { width: 0, height: 0 };
     let columnIndex = startColumnIndex;
     let rtlEnabled;
 
     for (let i = 0; i <= cellsLength; i++) {
       if (i < cellsLength) {
-        item = items[i];
-        offset = getBoundingRect(item);
-        // @ts-expect-error
-        rtlEnabled = $(item).css('direction') === 'rtl';
+        $item = items.eq(i);
+        offset = $item.offset();
+        itemRect = getBoundingRect($item.get(0));
+        rtlEnabled = $item.css('direction') === 'rtl';
       }
 
+      const offsetRight = offset.left + itemRect.width;
+      const offsetBottom = offset.top + itemRect.height;
+
       const pointProps: any = {
         index: columnIndex,
         columnIndex,
-        item,
-        x: !isVertical && rtlEnabled !== (i === cellsLength)
-          ? offset?.right ?? 0
-          : offset?.left ?? 0,
-        y: isVertical && i === cellsLength ? offset?.bottom ?? 0 : offset?.top ?? 0,
+        item: $item?.get(0),
+        x: !isVertical && rtlEnabled !== (i === cellsLength) ? offsetRight : offset.left,
+        y: isVertical && i === cellsLength ? offsetBottom : offset.top,
       };
 
       if (!isVertical && i > 0) {
-        const prevItemOffset = getBoundingRect(items[i - 1]);
-        const prevItemOffsetX = rtlEnabled ? prevItemOffset.left : prevItemOffset.right;
+        const prevItemOffset: { left: number; top: number } = items.eq(i - 1).offset();
+        const { width: prevItemWidth }: { width: number } = getBoundingRect(items[i - 1]);
+        const prevItemOffsetX = rtlEnabled
+          ? prevItemOffset.left
+          : prevItemOffset.left + prevItemWidth;
 
         if (prevItemOffset.top < pointProps.y) {
           pointProps.y = prevItemOffset.top;

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

@@ -476,6 +476,27 @@ const footerView = (
 ) => class FooterViewStickyColumnsExtender extends baseStickyColumns(Base) {};
 
 const columnsResizer = (Base: ModuleType<ColumnsResizerViewController>) => class ColumnResizerStickyColumnsExtender extends Base {
+  protected getSeparatorOffsetX($cell: dxElementWrapper): number {
+    // @ts-expect-error
+    const hasStickyColumns = this._columnHeadersView?.hasStickyColumns();
+
+    if (hasStickyColumns) {
+      const $container = $(this._columnHeadersView.getContent());
+      const isFixedCellPinnedToRight = GridCoreStickyColumnsDom.isFixedCellPinnedToRight(
+        $cell,
+        $container,
+        this.addWidgetPrefix.bind(this),
+      );
+      const isWidgetResizingMode = this.option('columnResizingMode') === 'widget';
+
+      if (isWidgetResizingMode && isFixedCellPinnedToRight) {
+        return $cell.offset()?.left ?? 0;
+      }
+    }
+
+    return super.getSeparatorOffsetX($cell);
+  }
+
   protected _correctColumnIndexForPoint(point, correctionValue: number, columns): void {
     const rtlEnabled = this.option('rtlEnabled');
     const isWidgetResizingMode = this.option('columnResizingMode') === 'widget';

packages/testcafe-models/dataGrid/index.ts

@@ -682,7 +682,7 @@ export default class DataGrid extends Widget {
     )();
   }
 
-  resizeHeader(columnIndex: number, offset: number, isRightBoundary = false): Promise<void>  {
+  resizeHeader(columnIndex: number, offset: number, needToTriggerPointerUp = true): Promise<void>  {
     const { getInstance } = this;
 
     return ClientFunction(
@@ -691,13 +691,16 @@ export default class DataGrid extends Widget {
         const $gridElement = $(gridInstance.element());
         const columnHeadersView = gridInstance.getView('columnHeadersView');
         const $header = $(columnHeadersView.getHeaderElement(columnIndex));
-        const headerOffset = $header.get(0).getBoundingClientRect();
-        const offsetX = isRightBoundary ? headerOffset.right : headerOffset.left;
+        const headerOffset = $header.offset();
+        const offsetX = headerOffset.left;
 
         triggerPointerMove($(document), offsetX, headerOffset.top + 1);
         triggerPointerDown($gridElement, offsetX, headerOffset.top + 1);
         triggerPointerMove($(document), offsetX + offset, headerOffset.top + 1);
-        triggerPointerUp($(document), offsetX + offset, headerOffset.top + 1);
+
+        if (needToTriggerPointerUp) {
+          triggerPointerUp($(document), offsetX + offset, headerOffset.top + 1);
+        }
       },
       {
         dependencies: {
@@ -707,7 +710,7 @@ export default class DataGrid extends Widget {
           triggerPointerUp,
           columnIndex,
           offset,
-          isRightBoundary,
+          needToTriggerPointerUp,
         },
       },
     )();