Popup: Update toolbar integrationOptions with toolbarItems (T1312079) (#31744)

Co-authored-by: marker dao ® <[email protected]>

Author: marker-dao

packages/devextreme/js/__internal/ui/popup/m_popup.ts

@@ -621,6 +621,16 @@ class Popup<
     return this._renderByTemplate(template, $container);
   }
 
+  _getIntegrationOptions(): Record<string, unknown> {
+    // @ts-expect-error integrationOptions
+    const { integrationOptions } = this.option();
+
+    return {
+      ...integrationOptions as Record<string, unknown>,
+      skipTemplates: ['content', 'title'],
+    };
+  }
+
   _renderByPolymorphicTemplate(
     items: ToolbarItem[],
     $container: dxElementWrapper,
@@ -633,11 +643,7 @@ class Popup<
       useFlatToolbarButtons,
     } = this.option();
 
-    const integrationOptions = extend(
-      {},
-      this.option('integrationOptions'),
-      { skipTemplates: ['content', 'title'] },
-    );
+    const integrationOptions = this._getIntegrationOptions();
 
     const toolbarOptions = extend(additionalToolbarOptions, {
       disabled,
@@ -684,7 +690,17 @@ class Popup<
   _updateToolbarOptions(toolbar: string, options: Partial<ToolbarProperties>): void {
     const instance = toolbar === 'top' ? this._topToolbar : this._bottomToolbar;
 
-    instance?.option(options);
+    if (!instance) {
+      return;
+    }
+
+    const integrationOptions = this._getIntegrationOptions();
+
+    // @ts-expect-error integrationOptions
+    instance.option({
+      ...options,
+      integrationOptions,
+    });
   }
 
   _toggleAriaLabel(): void {

packages/devextreme/testing/tests/DevExpress.ui.widgets/popup.tests.js

@@ -40,8 +40,9 @@ import 'ui/date_box';
 const IS_SAFARI = !!browser.safari;
 const IS_IOS_DEVICE = devices.real().platform === 'ios';
 const IS_OLD_SAFARI = IS_SAFARI && compareVersions(browser.version, [11]) < 0;
-const PREVENT_SAFARI_SCROLLING_CLASS = 'dx-prevent-safari-scrolling';
 
+const PREVENT_SAFARI_SCROLLING_CLASS = 'dx-prevent-safari-scrolling';
+const CUSTOM_ITEM_CLASS = 'custom-item-class';
 const TOOLBAR_LABEL_CLASS = 'dx-toolbar-label';
 
 themes.setDefaultTimeout(0);
@@ -2826,6 +2827,10 @@ QUnit.module('rendering', {
 QUnit.module('templates', {
     beforeEach: function() {
         executeAsyncMock.setup();
+
+        this.getInstance = () => $('#popup').dxPopup('instance');
+        this.getOverlayContent = () => this.getInstance().$overlayContent();
+        this.getCustomItem = () => this.getOverlayContent().find(`.${CUSTOM_ITEM_CLASS}`);
     },
     afterEach: function() {
         executeAsyncMock.teardown();
@@ -3040,6 +3045,43 @@ QUnit.module('templates', {
         assert.strictEqual(toolbarButtonText, buttonText, 'default content template rendered');
         assert.strictEqual(toolbarTabTitleText, `${titleText}${titleText}`, 'default title template rendered');
     });
+
+    QUnit.test('Popup toolbar should render custom template from integrationOptions after runtime toolbarItems change (T1312079)', function(assert) {
+        const popup = $('#popup').dxPopup({
+            visible: true,
+            showTitle: true,
+            title: 'Title',
+        }).dxPopup('instance');
+
+        const $customItemOnInit = this.getCustomItem();
+
+        assert.strictEqual($customItemOnInit.length, 0, 'custom template not rendered initially');
+
+        popup.option({
+            integrationOptions: {
+                templates: {
+                    'customToolbarTemplate': {
+                        render(args) {
+                            $('<div>')
+                                .attr('class', CUSTOM_ITEM_CLASS)
+                                .appendTo(args.container);
+                        },
+                    },
+                },
+            },
+            toolbarItems: [
+                {
+                    location: 'after',
+                    toolbar: 'top',
+                    template: 'customToolbarTemplate',
+                },
+            ],
+        });
+
+        const $customItemAfterRuntimeChange = this.getCustomItem();
+
+        assert.strictEqual($customItemAfterRuntimeChange.length, 1, 'custom template rendered after runtime change');
+    });
 });
 
 QUnit.module('renderGeometry', {