fix: wrong drop position when reordering columns in grid (T1246567) (#…

…3682) * fix the wrong drop position * add unit test * lint
DevExpress · Oct 25, 2024 · 0d98407 · 0d98407
1 parent b856daa
commit 0d98407
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 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
@@ -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
@@ -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]());