fix: popup title bar shows [object Object] when jQuery 4.0 Beta is used (T1280032) (#29913)

Author: VasilyStrelyaev

packages/devextreme/js/core/utils/dom.js

@@ -80,9 +80,13 @@ export const extractTemplateMarkup = (element) => {
 };
 
 export const normalizeTemplateElement = (element) => {
-    let $element = isDefined(element) && (element.nodeType || isRenderer(element))
-        ? $(element)
-        : $('<div>').html(element).contents();
+    let $element = $();
+
+    if(isDefined(element) && (element.nodeType || isRenderer(element))) {
+        $element = $(element);
+    } else if(typeof element !== 'object') {
+        $element = $('<div>').html(element).contents();
+    }
 
     if($element.length === 1) {
         if($element.is('script')) {

packages/devextreme/testing/tests/DevExpress.core/utils.dom.tests.js

@@ -1,13 +1,44 @@
 import $ from 'jquery';
 import domUtils from 'core/utils/dom';
 import support from 'core/utils/support';
+import { EmptyTemplate } from 'core/templates/empty_template';
 import styleUtils from 'core/utils/style';
 import devices from 'core/devices';
 import initMobileViewport from 'mobile/init_mobile_viewport';
 import keyboardMock from '../../helpers/keyboardMock.js';
 
 QUnit.module('createMarkup');
 
+QUnit.test('normalizeTemplateElement returns a wrapper if given an element', function(assert) {
+    const domElement = document.createElement('span');
+
+    domElement.innerHTML = 'Some text';
+
+    const $result = domUtils.normalizeTemplateElement(domElement);
+
+    assert.equal($result.length, 1, 'normalizeTemplateElement works with elements');
+    assert.equal($result[0].localName, 'span', 'normalizeTemplateElement works with elements');
+    assert.equal($result.text(), 'Some text', 'normalizeTemplateElement works with elements');
+});
+
+QUnit.test('normalizeTemplateElement returns a wrapper if given an HTML string', function(assert) {
+    const htmlString = '<span>Some text</span>';
+
+    const $result = domUtils.normalizeTemplateElement(htmlString);
+
+    assert.equal($result.length, 1, 'normalizeTemplateElement works with strings');
+    assert.equal($result[0].localName, 'span', 'normalizeTemplateElement works with strings');
+    assert.equal($result.text(), 'Some text', 'normalizeTemplateElement works with strings');
+});
+
+QUnit.test('normalizeTemplateElement returns an empty element for other inputs (T1280032) (jQuery 4)', function(assert) {
+    const template = new EmptyTemplate();
+
+    const $result = domUtils.normalizeTemplateElement(template);
+
+    assert.equal($result.length, 0, 'normalizeTemplateElement works with TemplateBase objects');
+});
+
 QUnit.test('normalizeTemplateElement with script element', function(assert) {
     const domElement = document.createElement('script');
 
@@ -18,7 +49,6 @@ QUnit.test('normalizeTemplateElement with script element', function(assert) {
     assert.equal($result.text(), 'Test', 'template based on script element works fine');
 });
 
-
 QUnit.module('clipboard');
 
 QUnit.test('get text from clipboard', function(assert) {