DropDownButton: Remove content template from Popup integrationOptions (T1294338)

Author: marker-dao

packages/devextreme/js/__internal/ui/m_drop_down_button.ts

@@ -375,10 +375,12 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
     this._popupContentId = `dx-${new Guid()}`;
     this.setAria('id', this._popupContentId, $content);
 
-    return template.render({
+    const result = template.render({
       container: getPublicElement($content),
       model: this.option('items') || this._dataController.getDataSource(),
     });
+
+    return result;
   }
 
   _popupOptions() {
@@ -412,6 +414,7 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
         at: `${horizontalAlignment} bottom`,
       },
       _wrapperClassExternal: DROP_DOWN_EDITOR_OVERLAY_CLASS,
+      contentTemplate: null,
     }, this._options.cache('dropDownOptions'), { visible: this.option('opened') });
   }
 
@@ -583,19 +586,20 @@ class DropDownButton extends Widget<DropDownButtonProperties> {
     this.$element().toggleClass(DROP_DOWN_BUTTON_HAS_ARROW_CLASS, hasArrow);
   }
 
-  toggle(visible?: boolean) {
+  toggle(visible?: boolean): Promise<unknown> | undefined {
     if (!this._popup) {
       this._renderPopup();
       this._renderContent();
     }
+
     return this._popup?.toggle(visible);
   }
 
-  open() {
+  open(): Promise<unknown> | undefined {
     return this.toggle(true);
   }
 
-  close() {
+  close(): Promise<unknown> | undefined {
     return this.toggle(false);
   }
 

packages/devextreme/js/__internal/ui/overlay/m_overlay.ts

@@ -961,10 +961,10 @@ class Overlay<
 
   _renderContentImpl(): Promise<void> {
     const whenContentRendered = Deferred();
-
     const contentTemplateOption = this.option('contentTemplate');
     const contentTemplate = this._getTemplate(contentTemplateOption);
     const transclude = this._templateManager.anonymousTemplateName === contentTemplateOption;
+
     contentTemplate?.render({
       container: getPublicElement(this.$content()),
       noModel: true,
@@ -978,6 +978,7 @@ class Overlay<
         }
       },
     });
+
     const { preventScrollEvents } = this.option();
 
     this._toggleWrapperScrollEventsSubscription(preventScrollEvents);
@@ -987,6 +988,7 @@ class Overlay<
         this._moveToContainer();
       }
     });
+
     // @ts-expect-error ts-error
     return whenContentRendered.promise();
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownOptions.tests.js

@@ -103,7 +103,7 @@ const optionComparer = {
         assert.strictEqual(getPopupInstance(editor).option('position.of').get(0), expectedPosition.of.get(0), 'popup position.of is correct');
     },
     contentTemplate: function(assert, editor) {
-        if(editor.NAME === 'dxDropDownBox' || editor.NAME === 'dxDropDownButton') {
+        if(editor.NAME === 'dxDropDownBox') {
             assert.strictEqual(editor.option('dropDownOptions.contentTemplate'), 'content', 'dropDownOptions.contentTemplate is correct');
             assert.strictEqual(getPopupInstance(editor).option('contentTemplate'), 'content', 'popup contentTemplate is correct');
             return;
@@ -154,8 +154,10 @@ dropDownEditorsNames.forEach(widgetName => {
         QUnit.module('dropDownOptions on pure init', () => {
             dropDownOptionsKeys.forEach(option => {
                 // TODO: fix this cases
-                if(widgetName === 'dxDropDownBox' && (option === 'focusStateEnabled' || option === 'tabIndex')
-                    || widgetName === 'dxDropDownButton' && (option === 'showCloseButton' || option === '_ignorePreventScrollEventsDeprecation')) {
+                if(
+                    widgetName === 'dxDropDownBox' && (option === 'focusStateEnabled' || option === 'tabIndex')
+                    || widgetName === 'dxDropDownButton' && (option === 'showCloseButton' || option === '_ignorePreventScrollEventsDeprecation')
+                ) {
                     return;
                 }
                 QUnit.test(`${option} is correct`, function(assert) {

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

@@ -2618,6 +2618,26 @@ QUnit.module('keyboard navigation', {
     });
 });
 
+QUnit.module('content template', () => {
+    QUnit.test('content template render function should be called once (T1294338)', function(assert) {
+        const renderSpy = sinon.spy();
+
+        const dropDownButton = new DropDownButton($('#dropDownButton'), {
+            integrationOptions: {
+                templates: {
+                    content: {
+                        render: renderSpy,
+                    },
+                },
+            },
+        });
+
+        dropDownButton.open();
+
+        assert.ok(renderSpy.calledOnce, 'render called once');
+    });
+});
+
 QUnit.module('custom content template', {}, () => {
     QUnit.test('dropDownContentTemplate option can be used', function(assert) {
         const templateHandler = sinon.stub().returns('Template 1');
@@ -2758,7 +2778,6 @@ QUnit.module('Button template', {}, () => {
     });
 });
 
-
 QUnit.module('Accessibility', {
     beforeEach: function() {
         this.elementSelector = '#dropDownButton';