From 0d98407fca01eed1dc3f05463897029a89b6e527 Mon Sep 17 00:00:00 2001
From: Vasily Strelyaev <VasilyStrelyaev@users.noreply.github.com>
Date: Fri, 25 Oct 2024 12:38:44 +0400
Subject: [PATCH] fix: wrong drop position when reordering columns in grid
 (T1246567) (#3682)

* fix the wrong drop position

* add unit test

* lint
---
 .../plugins/table-column-reordering.test.tsx  | 66 ++++++++++++++++++-
 .../src/plugins/table-column-reordering.tsx   |  5 +-
 2 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/packages/dx-react-grid/src/plugins/table-column-reordering.test.tsx b/packages/dx-react-grid/src/plugins/table-column-reordering.test.tsx
index 6c913f0a2c..c1f3259cb6 100644
--- a/packages/dx-react-grid/src/plugins/table-column-reordering.test.tsx
+++ b/packages/dx-react-grid/src/plugins/table-column-reordering.test.tsx
@@ -173,9 +173,12 @@ describe('TableColumnReordering', () => {
         {children}
       </div>
     );
-    const mountWithCellTemplates = ({
-      defaultOrder, onOrderChange,
-    }, deps = {}) => mount((
+
+    const TestComponent = ({
+      defaultOrder,
+      onOrderChange,
+      deps,
+    }) => (
       <DragDropProvider>
         <PluginHost>
           <Template name="table">
@@ -207,6 +210,16 @@ describe('TableColumnReordering', () => {
           />
         </PluginHost>
       </DragDropProvider>
+    );
+
+    const mountWithCellTemplates = ({
+      defaultOrder, onOrderChange,
+    }, deps = {}) => mount((
+      <TestComponent
+        defaultOrder={defaultOrder}
+        onOrderChange={onOrderChange}
+        deps={deps}
+      />
     ));
 
     beforeEach(() => {
@@ -313,6 +326,53 @@ describe('TableColumnReordering', () => {
         .toHaveBeenLastCalledWith(['c', 'a', 'b'], 1, 2);
     });
 
+    it('should clear cell dimension cache when the number of columns changes', () => {
+      const deps = {
+        getter: {
+          tableColumns: [
+            ...defaultDeps.getter.tableColumns,
+          ],
+        },
+      };
+      let cellDimensions;
+
+      orderedColumns.mockImplementation(() => deps.getter.tableColumns);
+      getTableTargetColumnIndex.mockImplementation((cellDimensionsArg) => {
+        cellDimensions = cellDimensionsArg;
+        return 1;
+      });
+
+      const wrapper = mount(
+        <TestComponent
+          defaultOrder={['a', 'b']}
+          onOrderChange={() => undefined}
+          deps={deps}
+        />,
+      );
+
+      const onOver = wrapper.find(TableMock).prop('onOver');
+
+      onOver({ payload: [{ type: 'column', columnName: 'a' }], ...defaultClientOffset });
+
+      expect(cellDimensions.length).toEqual(2);
+
+      const newDeps = {
+        getter: {
+          tableColumns: [
+            ...[defaultDeps.getter.tableColumns[0]],
+          ],
+        },
+      };
+      cellDimensions = [];
+
+      orderedColumns.mockImplementation(() => newDeps.getter.tableColumns);
+      wrapper.setProps({ deps: newDeps });
+
+      onOver({ payload: [{ type: 'column', columnName: 'a' }], ...defaultClientOffset });
+
+      expect(cellDimensions.length).toEqual(1);
+    });
+
     it('should reset cell dimensions after leave and drop events', () => {
       const onOverArg = { payload: [{ type: 'column', columnName: 'a' }], ...defaultClientOffset };
       const { onOver, onLeave, onDrop } = mountWithCellTemplates({ defaultOrder: ['a', 'b'] })
diff --git a/packages/dx-react-grid/src/plugins/table-column-reordering.tsx b/packages/dx-react-grid/src/plugins/table-column-reordering.tsx
index 042764691b..1eb168574b 100644
--- a/packages/dx-react-grid/src/plugins/table-column-reordering.tsx
+++ b/packages/dx-react-grid/src/plugins/table-column-reordering.tsx
@@ -86,7 +86,10 @@ class TableColumnReorderingRaw extends React.PureComponent<TableColumnReordering
   }
 
   cacheCellDimensions() {
-    this.cellDimensions = (this.cellDimensions && this.cellDimensions.length)
+    this.cellDimensions = (this.cellDimensions
+        && this.cellDimensions.length
+        && this.cellDimensions.length === Object.keys(this.cellDimensionGetters).length
+      )
       ? this.cellDimensions
       : this.getAvailableColumns()
         .map(columnName => this.cellDimensionGetters[columnName]());