diff --git a/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts b/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts index d4072e406c06..1ab03630185e 100644 --- a/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts +++ b/packages/devextreme/js/__internal/ui/toolbar/internal/toolbar.menu.ts @@ -353,6 +353,12 @@ export default class DropDownMenu extends Widget { activeStateEnabled: true, onItemRendered, _itemAttributes: { role: 'menuitem' }, + _onItemsRendered: (): void => { + // T1322123 + if (this.option('templatesRenderAsynchronously')) { + this._popup?._renderGeometry(); + } + }, }); } diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.menu.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.menu.tests.js index e0e3d9dd706a..d3dbf5fe6814 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.menu.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/toolbar.menu.tests.js @@ -290,6 +290,41 @@ QUnit.module('render', moduleConfig, () => { assert.strictEqual(this.overflowMenu.$popupContent().closest($container).length, 1, 'Popover content located into desired container'); }); + QUnit.test('popup should have correct height after async item templates are rendered (T1322123)', function(assert) { + const templateRenderingTimeout = 10; + const itemHeight = 50; + + this.instance.option({ + items: [1, 2, 3], + templatesRenderAsynchronously: true, + integrationOptions: { + templates: { + 'item': { + render({ model, container, onRendered }) { + setTimeout(() => { + const $item = $(`
${model}
`); + $item.css('height', itemHeight); + $item.appendTo(container); + + onRendered(); + }, templateRenderingTimeout); + } + } + } + }, + }); + + this.overflowMenu.click(); + + this.clock.tick(templateRenderingTimeout); + + const $overlayContent = this.overflowMenu.popup().$overlayContent(); + const overlayContentHeight = getOuterHeight($overlayContent); + + assert.strictEqual(this.overflowMenu.$items().length, 3, 'all items are rendered'); + assert.strictEqual(overlayContentHeight, 197, 'popup height is updated'); + }); + QUnit.test('popup should be placed into new container after changing the container option', function(assert) { const $container = $('#dropDownMenu');