DataGrid - The between filter dropdown sticks to the viewport edge during horizontal scrolling (T1280071) (#30145)

Author: tongsonbarbs

e2e/testcafe-devextreme/tests/dataGrid/filterRow/etalons/filter-row-filter-range-hide-on-scroll.png

@@ -225,3 +225,38 @@ test('DataGrid - NVDA reads filter menu items as "Search box 1 of 8" (T1290386)'
     visible: true,
   },
 }));
+
+test('DataGrid - The `between` filter dropdown sticks to the viewport edge during horizontal scrolling (T1280071)', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid('#container');
+  const filterEditor = dataGrid.getFilterEditor(0, FilterTextBox);
+
+  await dataGrid.isReady();
+
+  await t.debug();
+  await t
+    .click(filterEditor.menuButton)
+    .click(filterEditor.menu.getItemByText('Between'));
+
+  await dataGrid.scrollBy({ x: 999 });
+  await t
+    .expect(await takeScreenshot('filter-row-filter-range-hide-on-scroll.png', dataGrid.element))
+    .ok()
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [
+    { ID: 1, Text: 'Item 1' },
+    { ID: 2, Text: '' },
+    { ID: 3, Text: 'Item 3' },
+  ],
+  keyExpr: 'ID',
+  filterRow: {
+    visible: true,
+  },
+  scrolling: {
+    useNative: true,
+  },
+  columnWidth: 400,
+  width: 500,
+}));

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

@@ -300,6 +300,8 @@ const columnHeadersView = (Base: ModuleType<ColumnHeadersView>) => class ColumnH
       showTitle: false,
       focusStateEnabled: false,
       hideOnOutsideClick: true,
+      hideOnParentScroll: true,
+      _hideOnParentScrollTarget: $overlay,
       wrapperAttr: { class: filterRangeOverlayClass },
       animation: false,
       position: {

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

@@ -1599,7 +1599,6 @@ QUnit.module('Filter Row with real dataController and columnsController', {
         assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 0, 'no overlay wrapper');
     });
 
-    // T619045
     QUnit.test('Overlay of between operation does not hide after scroll event', function(assert) {
     // arrange
         const that = this;
@@ -1632,7 +1631,8 @@ QUnit.module('Filter Row with real dataController and columnsController', {
         $('.dx-viewport').find('.dx-filter-range-content').trigger('scroll');
 
         // assert
-        assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 1, 'has overlay wrapper');
+        // T1280071
+        assert.equal($('.dx-viewport').children('.dx-datagrid-filter-range-overlay').length, 0, 'overlay wrapper is removed');
     });
 
     // T428602