diff --git a/js/ui/filter_builder/filter_builder.js b/js/ui/filter_builder/filter_builder.js index 5960be43bab8..077bc2890b77 100644 --- a/js/ui/filter_builder/filter_builder.js +++ b/js/ui/filter_builder/filter_builder.js @@ -1151,9 +1151,10 @@ const FilterBuilder = Widget.inherit({ position: options.menu.position, animation: options.menu.animation, contentTemplate: function(contentElement) { - const $menuContainer = $('
'); + const $menuContainer = $('
').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 new file mode 100644 index 000000000000..2e48c227f196 --- /dev/null +++ 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; + + 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 new file mode 100644 index 000000000000..3d596106d7e0 --- /dev/null +++ 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 new file mode 100644 index 000000000000..d61e839ad97a --- /dev/null +++ b/testing/functional/tests/filterBuilder/pages/T852701.html @@ -0,0 +1,35 @@ + + + + T852701 + + + + + + + + +
+ + +