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

Author: dmlvr

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

@@ -1,29 +1,23 @@
 import FilterBuilder from 'devextreme-testcafe-models/filterBuilder';
-import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import url from '../../../helpers/getPageUrl';
 import { fields, filter } from './data';
 import { createWidget } from '../../../helpers/createWidget';
-import { testScreenshot } from '../../../helpers/themeUtils';
 import { insertStylesheetRulesToPage } from '../../../helpers/domUtils';
 
 fixture.disablePageReloads`Filter Builder Scrolling Test`
   .page(url(__dirname, '../../container.html'));
 
-// T1273328
-test('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;}');
 

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

@@ -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-scss/scss/widgets/base/filterBuilder/_index.scss

@@ -893,7 +893,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/js/__internal/filter_builder/m_filter_builder.ts

@@ -1293,8 +1293,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']];
@@ -1310,7 +1311,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
@@ -1606,7 +1607,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);