DataGrid - Fix incorrect position of the 'between' filter dropdown when columns are resized (T1303927) (#33086)

Author: markallenramirez

e2e/testcafe-devextreme/tests/dataGrid/common/filterRow/functional.ts

@@ -305,3 +305,49 @@ test('Lookup filter should not change to (All) after searching twice in another
     }
   },
 }));
+
+test('DataGrid – `between` filter dropdown should be closed when columns are resized (T1303927)', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid('#container');
+  const filterCell = dataGrid.getFilterCell(0);
+
+  // assert
+  await t.expect(dataGrid.isReady()).ok();
+
+  // act
+  await t.click(filterCell.element);
+
+  // assert
+  await t.expect(dataGrid.getFilterRangeOverlay().exists).ok('Filter range overlay is shown');
+
+  // act
+  await dataGrid.resizeHeader(1, 50);
+
+  // assert
+  await t.expect(dataGrid.getFilterRangeOverlay().exists).notOk('Filter range overlay is closed');
+
+  // act
+  await t.click(filterCell.element);
+
+  // assert
+  await t.expect(dataGrid.getFilterRangeOverlay().exists).ok('Filter range overlay is shown');
+
+  // act
+  await dataGrid.resizeHeader(2, 50);
+
+  // assert
+  await t.expect(dataGrid.getFilterRangeOverlay().exists).notOk('Filter range overlay is closed');
+}).before(async () => createWidget('dxDataGrid', {
+  allowColumnResizing: true,
+  filterRow: { visible: true },
+  showBorders: true,
+  columns: [{
+    dataField: 'field1',
+    dataType: 'number',
+    selectedFilterOperation: 'between',
+  }, {
+    dataField: 'field2',
+  }, {
+    dataField: 'field3',
+  }],
+}));

packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts

@@ -897,38 +897,8 @@ const columnsResizer = (Base: ModuleType<ColumnsResizerViewController>) => class
     if (this.isResizing()) {
       // @ts-expect-error
       const overlayInstance = this._columnHeadersView.getFilterRangeOverlayInstance();
-
-      if (!overlayInstance || !this._targetPoint) {
-        return;
-      }
-
-      const cellIndex = overlayInstance.$element().closest('td').index();
-      const { columnIndex: resizingColumnIndex } = this._targetPoint;
-
-      if (cellIndex === resizingColumnIndex || cellIndex === resizingColumnIndex + 1) {
-        overlayInstance.$content().hide();
-      }
-    }
-  }
-
-  protected _endResizing() {
-    const that = this;
-    let $cell;
-
-    if (that.isResizing()) {
-      // @ts-expect-error
-      const overlayInstance = that._columnHeadersView.getFilterRangeOverlayInstance();
-
-      if (overlayInstance) {
-        $cell = overlayInstance.$element().closest('td');
-        // @ts-expect-error
-        that._columnHeadersView._updateFilterRangeOverlay({ width: getOuterWidth($cell, true) + CORRECT_FILTER_RANGE_OVERLAY_WIDTH });
-        overlayInstance.$content().show();
-      }
+      overlayInstance?.hide();
     }
-
-    // @ts-expect-error
-    super._endResizing.apply(that, arguments);
   }
 };