DropDownButton: Remove content template from Popup integrationOptions (T1294338)

Author: marker-dao

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

@@ -319,10 +319,12 @@ const DropDownButton = (Widget as any).inherit({
     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() {
@@ -356,6 +358,7 @@ const DropDownButton = (Widget as any).inherit({
         at: `${horizontalAlignment} bottom`,
       },
       _wrapperClassExternal: DROP_DOWN_EDITOR_OVERLAY_CLASS,
+      contentTemplate: null,
     }, this._options.cache('dropDownOptions'), { visible: this.option('opened') });
   },
 
@@ -524,19 +527,20 @@ const DropDownButton = (Widget as any).inherit({
     this.$element().toggleClass(DROP_DOWN_BUTTON_HAS_ARROW_CLASS, hasArrow);
   },
 
-  toggle(visible) {
+  toggle(visible?: boolean): Promise<unknown> | undefined {
     if (!this._popup) {
       this._renderPopup();
       this._renderContent();
     }
-    return this._popup.toggle(visible);
+
+    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

@@ -864,11 +864,11 @@ const Overlay: typeof OverlayInstance = Widget.inherit({
 
   _renderContentImpl() {
     const whenContentRendered = Deferred();
-
     const contentTemplateOption = this.option('contentTemplate');
     const contentTemplate = this._getTemplate(contentTemplateOption);
     const transclude = this._templateManager.anonymousTemplateName === contentTemplateOption;
-    contentTemplate && contentTemplate.render({
+
+    contentTemplate?.render({
       container: getPublicElement(this.$content()),
       noModel: true,
       transclude,
@@ -882,7 +882,9 @@ const Overlay: typeof OverlayInstance = Widget.inherit({
       },
     });
 
-    this._toggleWrapperScrollEventsSubscription(this.option('preventScrollEvents'));
+    const { preventScrollEvents } = this.option();
+
+    this._toggleWrapperScrollEventsSubscription(preventScrollEvents);
 
     whenContentRendered.done(() => {
       if (this.option('visible')) {

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';