FilterBuilder - The field drop-down window moves with the page scroll (T1273328) (DevExpress#28989)

Author: tongsonbarbs

e2e/testcafe-devextreme/tests/filterBuilder/etalons/filterBuilder_scroll_with_popup (fluent-blue-light).png

@@ -0,0 +1,36 @@
+import FilterBuilder from 'devextreme-testcafe-models/filterBuilder';
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import url from '../../helpers/getPageUrl';
+import { fields, filter } from './data';
+import { safeSizeTest } from '../../helpers/safeSizeTest';
+import { createWidget } from '../../helpers/createWidget';
+import { testScreenshot } from '../../helpers/themeUtils';
+import { insertStylesheetRulesToPage } from '../../helpers/domUtils';
+
+fixture`Filter Builder Scrolling Test`.page(
+  url(__dirname, '../container.html'),
+);
+
+// T1273328
+safeSizeTest('FilterBuilder - The field drop-down window moves with the page scroll', async (t) => {
+  const filterBuilder = new FilterBuilder('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  await filterBuilder.isReady();
+
+  await t
+    .click(filterBuilder.getItem('operation'))
+    .scrollIntoView(filterBuilder.getItem('operation', 4));
+
+  await testScreenshot(t, takeScreenshot, 'filterBuilder_scroll_with_popup.png', { element: filterBuilder.element });
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  await insertStylesheetRulesToPage('#container {height: 150px; overflow: scroll;}');
+
+  await createWidget('dxFilterBuilder', {
+    fields,
+    value: filter,
+  });
+});

e2e/testcafe-devextreme/tests/filterBuilder/etalons/filterBuilder_scroll_with_popup (generic-light).png

@@ -25,6 +25,7 @@ $filterbuilder-menu-icon-color: null !default;
 @use "./common";
 
 .dx-filterbuilder {
+  position: relative;
   background-color: $filterbuilder-bg;
 
   @mixin button-color($color, $hover-color, $focus-color) {

e2e/testcafe-devextreme/tests/filterBuilder/etalons/filterBuilder_scroll_with_popup (material-blue-light).png

@@ -819,7 +819,7 @@ class FilterBuilder extends Widget<any> {
       visible: true,
       focusStateEnabled: false,
       preventScrollEvents: false,
-      hideOnParentScroll: this.option('closePopupOnTargetScroll'),
+      container: $popup,
       hideOnOutsideClick: true,
       onShown: options.popup.onShown,
       shading: false,

e2e/testcafe-devextreme/tests/filterBuilder/filterBuilderScrolling.ts

@@ -75,7 +75,7 @@ QUnit.module('Rendering', function() {
         });
 
         container.find('.' + FILTER_BUILDER_GROUP_OPERATION_CLASS).trigger('dxclick');
-        const popupInstance = container.find('.' + FILTER_BUILDER_OVERLAY_CLASS).dxPopup('instance');
+        const popupInstance = container.find(`.${FILTER_BUILDER_OVERLAY_CLASS}.dx-popup`).dxPopup('instance');
         assert.ok(popupInstance.option('deferRendering'));
     });
 
@@ -409,7 +409,7 @@ QUnit.module('Rendering', function() {
         $('.' + FILTER_BUILDER_GROUP_OPERATION_CLASS).trigger('dxclick');
 
         // assert
-        assert.notOk($container.find('.' + FILTER_BUILDER_OVERLAY_CLASS).dxPopup('instance').option('target'), 'popup target shoud not be set');
+        assert.notOk($container.find(`.${FILTER_BUILDER_OVERLAY_CLASS}.dx-popup`).dxPopup('instance').option('target'), 'popup target shoud not be set');
     });
 
     QUnit.test('Menu wrapper has filter builder overlay class', function(assert) {
@@ -1299,7 +1299,8 @@ QUnit.module('on value changed', function() {
     });
 
     // T824147
-    QUnit.test('Add-condition popup should be closed on scroll', function(assert) {
+    // T1273328 - new
+    QUnit.test('Add-condition popup should not be closed on scroll', function(assert) {
         // arrange
         const container = $('#container');
         const value = [['CompanyName', 'K&S Music']];
@@ -1315,7 +1316,7 @@ QUnit.module('on value changed', function() {
         const popupInstance = container.children('.dx-filterbuilder-overlay').dxPopup('instance');
 
         // assert
-        assert.equal(popupInstance.option('hideOnParentScroll'), true, 'popup\'s hideOnParentScroll');
+        assert.equal(popupInstance.option('hideOnParentScroll'), false, 'popup\'s hideOnParentScroll');
     });
 
     // T804262
@@ -1601,7 +1602,7 @@ QUnit.module('Group operations', function() {
         assert.equal(popup.length, 0);
     });
 
-    QUnit.test('nested level of groups = 1', function(assert) {
+    QUnit.test('nested level of groups = 2', function(assert) {
         const container = $('#container');
         container.dxFilterBuilder({
             fields: fields,
@@ -1611,7 +1612,7 @@ QUnit.module('Group operations', function() {
 
         $('.' + FILTER_BUILDER_IMAGE_ADD_CLASS).trigger('dxclick');
         let popup = container.find(`.${FILTER_BUILDER_OVERLAY_CLASS}`);
-        assert.equal(popup.length, 1);
+        assert.equal(popup.length, 2);
 
         selectMenuItem(1);