DataGrid: Menu items are truncated in the Filter Builder popup (cherry-pick) (#31474)

Author: dmlvr

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

@@ -1,31 +1,24 @@
 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) => {
+// T1273328 > T1294239
+test('FilterBuilder - The field drop-down closes 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());
+  await t.expect(FilterBuilder.getPopupTreeView().exists).notOk();
 }).before(async () => {
   await insertStylesheetRulesToPage('#container {height: 150px; overflow: scroll;}');
 

packages/devextreme-scss/scss/widgets/base/filterBuilder/_index.scss

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

packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts

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

packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/commonTests.js

@@ -1299,8 +1299,9 @@ QUnit.module('on value changed', function() {
     });
 
     // T824147
-    // T1273328 - new
-    QUnit.test('Add-condition popup should not be closed on scroll', function(assert) {
+    // T1273328
+    // T1294239 - new
+    QUnit.test('Add-condition popup should be closed on scroll by default', function(assert) {
         // arrange
         const container = $('#container');
         const value = [['CompanyName', 'K&S Music']];
@@ -1316,7 +1317,7 @@ QUnit.module('on value changed', function() {
         const popupInstance = container.children('.dx-filterbuilder-overlay').dxPopup('instance');
 
         // assert
-        assert.equal(popupInstance.option('hideOnParentScroll'), false, 'popup\'s hideOnParentScroll');
+        assert.equal(popupInstance.option('hideOnParentScroll'), true, 'popup\'s hideOnParentScroll should be true by default');
     });
 
     // T804262
@@ -1612,7 +1613,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, 2);
+        assert.ok(popup.length > 0);
 
         selectMenuItem(1);