FilterBuilder: Fix field menu showing for the last items if there's n…

…ot enough space in the bottom (T852701) (#11606)
DevExpress · Jan 21, 2020 · c736c2b · c736c2b
1 parent e355b9d
commit c736c2b
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 2 deletions.
diff --git a/js/ui/filter_builder/filter_builder.js b/js/ui/filter_builder/filter_builder.js
@@ -917,9 +917,10 @@ const FilterBuilder = Widget.inherit({
             position: options.menu.position,
             animation: options.menu.animation,
             contentTemplate: function(contentElement) {
-                const $menuContainer = $('<div>');
+                const $menuContainer = $('<div>').appendTo(contentElement);
                 that._createComponent($menuContainer, TreeView, options.menu);
-                return $menuContainer;
+                // T852701
+                this.repaint();
             },
             maxHeight: function() {
                 return getElementMaxHeightByWindow(options.menu.position.of);

diff --git a/testing/functional/model/filterBuilder.ts b/testing/functional/model/filterBuilder.ts
@@ -0,0 +1,31 @@
+import { Selector } from 'testcafe';
+import Widget from './internal/widget';
+
+const CLASS = {
+    item: 'dx-filterbuilder-item-field',
+    popupContent: 'dx-popup-content',
+    treeView: 'dx-treeview'
+};
+
+class Field {
+    element: Selector;
+    text: Promise<string>;
+
+    constructor (element: Selector) {
+        this.element = element;
+        this.text = element.textContent;
+    }
+};
+
+export default class FilterBuilder extends Widget {
+    name: string = 'dxFilterBuilder';
+
+    getField(index: number = 0): Field {
+        const fields = this.element.find(`.${CLASS.item}`);
+        return new Field(fields.nth(index));
+    }
+
+    getPopupTreeView(): Selector {
+        return Selector(`.${CLASS.popupContent} .${CLASS.treeView}`)
+    }
+}
diff --git a/testing/functional/tests/filterBuilder/filterBuilder.ts b/testing/functional/tests/filterBuilder/filterBuilder.ts
@@ -0,0 +1,21 @@
+import { Selector, ClientFunction } from 'testcafe';
+import url from '../../helpers/getPageUrl';
+import FilterBuilder from '../../model/filterBuilder';
+
+const scrollTo = ClientFunction((x, y) => {
+    window.scrollTo(x,y);
+});
+
+fixture `Filter Builder with scroll`
+    .page(url(__dirname, './pages/T852701.html'));
+
+test("Field menu should be opened on field click if window scroll exists (T852701)", async t => {
+    const filterBuilder = new FilterBuilder('#filter-builder');
+    const lastField = filterBuilder.getField(49);
+
+    await scrollTo(0, 10000);
+    await t.click(lastField.element);
+
+    await t.expect(lastField.text).eql('Test 50');
+    await t.expect(filterBuilder.getPopupTreeView().visible).ok();
+});
diff --git a/testing/functional/tests/filterBuilder/pages/T852701.html b/testing/functional/tests/filterBuilder/pages/T852701.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>T852701</title>
+
+        <link rel="stylesheet" type="text/css" href="../../../../../artifacts/css/dx.common.css"/>
+        <link rel="stylesheet" type="text/css" href="../../../../../artifacts/css/dx.light.css"/>
+
+        <script type="text/javascript" src="../../../../../artifacts/js/jquery.min.js"></script>
+        <script type="text/javascript" src="../../../../../artifacts/js/dx.all.debug.js"></script>
+    </head>
+    <body>
+        <div id="filter-builder"></div>
+        <script>
+            $(function() {
+                var filter = [];
+                var fields = [];
+
+                for(var i = 1; i <= 50; i++) {
+                    if(i > 1) {
+                        filter.push("or");
+                    }
+                    var name = "Test" + i;
+                    filter.push([name, "=", "Test"]);
+                    fields.push({ dataField: name })
+                }
+
+                $("#filter-builder").dxFilterBuilder({
+                    fields: fields,
+                    value: filter
+                });
+            });
+        </script>
+    </body>
+</html>