DropDownEditor: Move 'contentTemplate' option to DropDownBox (T860163) (

#11927, #12026) (#11993)

* DropDownEditor: Move 'contentTemplate' option to DropDownBox (T860163) (#11927)

* Fix test for T832410 case

js/ui/drop_down_box.js

@@ -14,6 +14,7 @@ import { normalizeKeyName } from '../events/utils';
 import { keyboard } from '../events/short';
 import devices from '../core/devices';
 import { getActiveElement } from '../core/dom_adapter';
+import { getPublicElement } from '../core/utils/dom';
 
 const DROP_DOWN_BOX_CLASS = 'dx-dropdownbox';
 const ANONYMOUS_TEMPLATE_NAME = 'content';
@@ -54,7 +55,7 @@ const DropDownBox = DropDownEditor.inherit({
 
             acceptCustomValue: false,
 
-            contentTemplate: 'content',
+            contentTemplate: ANONYMOUS_TEMPLATE_NAME,
 
 
             /**
@@ -214,7 +215,24 @@ const DropDownBox = DropDownEditor.inherit({
             return;
         }
 
-        return this.callBase();
+        const contentTemplate = this._getTemplateByOption('contentTemplate');
+
+        if(!(contentTemplate && this.option('contentTemplate'))) {
+            return;
+        }
+
+        const $popupContent = this._popup.$content();
+        const templateData = {
+            value: this._fieldRenderData(),
+            component: this
+        };
+
+        $popupContent.empty();
+
+        contentTemplate.render({
+            container: getPublicElement($popupContent),
+            model: templateData
+        });
     },
 
     _canShowVirtualKeyboard: function() {
@@ -242,6 +260,7 @@ const DropDownBox = DropDownEditor.inherit({
             tabIndex: -1,
             dragEnabled: false,
             focusStateEnabled,
+            contentTemplate: ANONYMOUS_TEMPLATE_NAME,
             closeOnTargetScroll: this._shouldCloseOnTargetScroll.bind(this),
             position: {
                 of: this.$element(),
@@ -283,6 +302,9 @@ const DropDownBox = DropDownEditor.inherit({
             case 'displayExpr':
                 this._renderValue();
                 break;
+            case 'contentTemplate':
+                this._invalidate();
+                break;
             default:
                 this.callBase(args);
         }

js/ui/drop_down_editor/ui.drop_down_editor.js

@@ -125,7 +125,6 @@ const DropDownEditor = TextBox.inherit({
             dropDownButtonTemplate: 'dropDownButton',
 
             fieldTemplate: null,
-            contentTemplate: null,
 
             openOnFieldClick: false,
 
@@ -484,6 +483,8 @@ const DropDownEditor = TextBox.inherit({
         this._renderPopupContent();
     },
 
+    _renderPopupContent: noop,
+
     _renderPopup: function() {
         this._popup = this._createComponent(this._$popup, Popup, extend(this._popupConfig(), this._options.cache('dropDownOptions')));
 
@@ -531,7 +532,8 @@ const DropDownEditor = TextBox.inherit({
             showCloseButton: false,
             toolbarItems: this._getPopupToolbarItems(),
             onPositioned: this._popupPositionedHandler.bind(this),
-            fullScreen: false
+            fullScreen: false,
+            contentTemplate: null
         };
     },
 
@@ -583,27 +585,6 @@ const DropDownEditor = TextBox.inherit({
         return this.callBase(positionRequest);
     },
 
-    _renderPopupContent: function() {
-        const contentTemplate = this._getTemplateByOption('contentTemplate');
-
-        if(!(contentTemplate && this.option('contentTemplate'))) {
-            return;
-        }
-
-        const $popupContent = this._popup.$content();
-        const templateData = {
-            value: this._fieldRenderData(),
-            component: this
-        };
-
-        $popupContent.empty();
-
-        contentTemplate.render({
-            container: getPublicElement($popupContent),
-            model: templateData
-        });
-    },
-
     _closeOutsideDropDownHandler: function({ target }) {
         const $target = $(target);
         const dropDownButton = this.getButton('dropDown');
@@ -778,7 +759,6 @@ const DropDownEditor = TextBox.inherit({
                     this._invalidate();
                 }
                 break;
-            case 'contentTemplate':
             case 'acceptCustomValue':
             case 'openOnFieldClick':
                 this._invalidate();

js/ui/drop_down_editor/ui.drop_down_list.js

@@ -112,10 +112,6 @@ const DropDownList = DropDownEditor.inherit({
             * @hidden
             */
             /**
-            * @name dxDropDownListOptions.contentTemplate
-            * @hidden
-            */
-            /**
             * @name dxDropDownListOptions.contentRender
             * @hidden
             */
@@ -439,6 +435,7 @@ const DropDownList = DropDownEditor.inherit({
     },
 
     _renderPopupContent: function() {
+        this.callBase();
         this._renderList();
     },
 

testing/tests/DevExpress.knockout/dropDownBox.tests.js

@@ -0,0 +1,29 @@
+import $ from 'jquery';
+import ko from 'knockout';
+
+import 'integration/knockout';
+import 'ui/drop_down_box';
+
+QUnit.testStart(function() {
+    const markup =
+        '<div id="dropDownBoxWithContentTemplate" data-bind="dxDropDownBox: { contentTemplate: \'content\', value: value, opened: true }">\
+            <div data-options="dxTemplate: { name: \'content\' }">\
+                <span data-bind="text: $data.value"></span>\
+            </div>\
+        </div>';
+
+    $('#qunit-fixture').html(markup);
+});
+
+QUnit.module('Templates');
+
+QUnit.test('contentTemplate', function(assert) {
+    const vm = {
+        value: 'test'
+    };
+
+    const $dropDownEditor = $('#dropDownBoxWithContentTemplate');
+    ko.applyBindings(vm, $dropDownEditor.get(0));
+
+    assert.equal($.trim($('.dx-popup-wrapper').text()), 'test', 'content rendered');
+});

testing/tests/DevExpress.knockout/dropDownEditor.tests.js

@@ -12,12 +12,6 @@ QUnit.testStart(function() {
                 <div data-bind="dxTextBox: {}"></div>\
             </div>\
         </div>\
-        \
-        <div id="dropDownEditorWithContentTemplate" data-bind="dxDropDownEditor: { contentTemplate: \'content\', value: value, opened: true }">\
-            <div data-options="dxTemplate: { name: \'content\' }">\
-                <span data-bind="text: $data.value"></span>\
-            </div>\
-        </div>\
         <div id="dropDownEditorWithButtonTemplate" data-bind="dxDropDownEditor: { dropDownButtonTemplate: \'buttonTpl\' }">\
             <div data-options="dxTemplate: { name: \'buttonTpl\' }">\
                 <span data-bind="text: $parent.text"></span>\
@@ -37,17 +31,6 @@ QUnit.test('fieldTemplate', function(assert) {
     assert.equal($.trim($dropDownEditor.text()), 'test', 'template rendered');
 });
 
-QUnit.test('contentTemplate', function(assert) {
-    const vm = {
-        value: 'test'
-    };
-
-    const $dropDownEditor = $('#dropDownEditorWithContentTemplate');
-    ko.applyBindings(vm, $dropDownEditor.get(0));
-
-    assert.equal($.trim($('.dx-popup-wrapper').text()), 'test', 'content rendered');
-});
-
 QUnit.test('drop button template', function(assert) {
     const vm = {
         text: 'V'

testing/tests/DevExpress.ui.widgets.editors/dropDownEditor.tests.js

@@ -15,10 +15,8 @@ import 'common.css!';
 
 QUnit.testStart(function() {
     const markup =
-        '<div id="qunit-fixture" class="qunit-fixture-visible">\
-            <div id="dropDownEditorLazy"></div>\
-            <div id="dropDownEditorSecond"></div>\
-        </div>';
+        `<div id="dropDownEditorLazy"></div>
+         <div id="dropDownEditorSecond"></div>`;
 
     $('#qunit-fixture').html(markup);
 });
@@ -29,6 +27,7 @@ const DROP_DOWN_EDITOR_OVERLAY = 'dx-dropdowneditor-overlay';
 const DROP_DOWN_EDITOR_ACTIVE = 'dx-dropdowneditor-active';
 const TEXT_EDITOR_INPUT_CLASS = 'dx-texteditor-input';
 const DROP_DOWN_EDITOR_FIELD_TEMPLATE_WRAPPER = 'dx-dropdowneditor-field-template-wrapper';
+const POPUP_CONTENT = 'dx-popup-content';
 const TAB_KEY_CODE = 'Tab';
 const ESC_KEY_CODE = 'Escape';
 
@@ -577,9 +576,6 @@ QUnit.module('focus policy', () => {
     QUnit.test('focusout to another editor should close current ddb (T832410)', function(assert) {
         const $dropDownEditor1 = $('#dropDownEditorLazy').dxDropDownEditor({
             items: [0, 1, 2],
-            contentTemplate() {
-                return $('<div>').attr('id', 'test-content');
-            },
             acceptCustomValue: true,
             focusStateEnabled: true,
             opened: true
@@ -604,7 +600,7 @@ QUnit.module('focus policy', () => {
 
         dropDownEditor1.open();
         dropDownEditor1.focus();
-        $input1.trigger($.Event('focusout', { relatedTarget: $('#test-content') }));
+        $input1.trigger($.Event('focusout', { relatedTarget: $(`.${POPUP_CONTENT}`) }));
 
         assert.ok(dropDownEditor1.option('opened'), 'should be still opened after the widget\'s popup focus');
     });
@@ -937,24 +933,6 @@ QUnit.module('Templates', () => {
         assert.strictEqual($placeholder.closest('.dx-textbox').length, 1, 'is textbox\'s placeholder');
     });
 
-
-    QUnit.test('contentTemplate as render', function(assert) {
-        $('#dropDownEditorLazy').dxDropDownEditor({
-            contentTemplate(data, content) {
-                assert.equal(isRenderer(content), !!config().useJQuery, 'contentElement is correct');
-                $(content).addClass('drop-down-editor-content');
-                return $('<div>').text(data.component.option('value'));
-            },
-            value: 'test',
-            opened: true
-        });
-
-        const $dropDownContent = $('.drop-down-editor-content');
-
-        assert.equal($dropDownContent.length, 1, 'There is one dropDownEditor content element with custom class');
-        assert.equal($.trim($dropDownContent.text()), 'test', 'Correct content rendered');
-    });
-
     QUnit.test('onValueChanged should be fired for each change by keyboard when fieldTemplate is used', function(assert) {
         const valueChangedSpy = sinon.spy();
 
@@ -1146,6 +1124,26 @@ QUnit.module('Templates', () => {
         keyboard.type('z5');
         assert.strictEqual($input.val(), '5-_', 'Masked TextBox works fine');
     });
+
+    QUnit.test('contentTemplate should not redefine popup content (T860163)', function(assert) {
+        assert.expect(1);
+
+        const $editor = $(`<div id='editor'>
+                <div data-options="dxTemplate: { name: 'content' }">
+                    Content template markup
+                </div>
+            </div>`).appendTo('#qunit-fixture');
+
+        $editor.dxDropDownEditor({
+            onPopupInitialized({ popup }) {
+                popup.on('contentReady', () => {
+                    const popupContentText = $(popup.content()).text();
+                    assert.ok(popupContentText.indexOf('Content template markup') < 0);
+                });
+            },
+            opened: true
+        });
+    });
 });
 
 QUnit.module('options', () => {
@@ -1538,7 +1536,7 @@ QUnit.module('aria accessibility', () => {
         const instance = $dropDownEditor.dxDropDownEditor('instance');
 
         assert.notEqual($dropDownEditor.attr('aria-owns'), undefined, 'owns exists');
-        assert.equal($dropDownEditor.attr('aria-owns'), $('.dx-popup-content').attr('id'), 'aria-owns points to popup\'s content id');
+        assert.equal($dropDownEditor.attr('aria-owns'), $(`.${POPUP_CONTENT}`).attr('id'), 'aria-owns points to popup\'s content id');
 
         instance.close();