Chat - group content and bubble elements should be attached to DOM before template render (T1304688)

Author: Zedwag

packages/devextreme/js/__internal/ui/chat/messagegroup.ts

@@ -112,11 +112,10 @@ class MessageGroup extends Widget<Properties> {
 
   _renderMessageBubble(message: Message): void {
     const $bubble = $('<div>')
-      .data(MESSAGE_DATA_KEY, message);
+      .data(MESSAGE_DATA_KEY, message)
+      .appendTo(this._$messageBubbleContainer);
 
     this._createComponent($bubble, MessageBubble, this._getMessageBubbleOptions(message));
-
-    this._$messageBubbleContainer.append($bubble);
   }
 
   _getMessageBubbleOptions(message: Message): MessageBubbleProperties {
@@ -136,13 +135,13 @@ class MessageGroup extends Widget<Properties> {
   }
 
   _renderMessageBubbles(items: Message[]): void {
-    this._$messageBubbleContainer = $('<div>').addClass(CHAT_MESSAGEGROUP_CONTENT_CLASS);
+    this._$messageBubbleContainer = $('<div>')
+      .addClass(CHAT_MESSAGEGROUP_CONTENT_CLASS)
+      .appendTo(this.element());
 
     items.forEach((message) => {
       this._renderMessageBubble(message);
     });
-
-    this._$messageBubbleContainer.appendTo(this.element());
   }
 
   _renderMessageGroupInformation(message: Message): void {

packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageGroup.tests.js

@@ -7,6 +7,7 @@ import dateLocalization from 'common/core/localization/date';
 const AVATAR_CLASS = 'dx-avatar';
 const CHAT_MESSAGEGROUP_TIME_CLASS = 'dx-chat-messagegroup-time';
 const CHAT_MESSAGEBUBBLE_CLASS = 'dx-chat-messagebubble';
+const CHAT_MESSAGEGROUP_CONTENT_CLASS = 'dx-chat-messagegroup-content';
 const CHAT_MESSAGEGROUP_AUTHOR_NAME_CLASS = 'dx-chat-messagegroup-author-name';
 
 const getStringTime = (time) => {
@@ -305,6 +306,21 @@ QUnit.module('MessageGroup', moduleConfig, () => {
             assert.strictEqual(messageTemplate.callCount, 1, 'messageTemplate function was called on bubble template render');
             assert.deepEqual(messageTemplate.lastCall.args[0], message, 'messageTemplate function was called with correct data');
         });
+
+        QUnit.test('Group content and bubble elements should be attached to DOM before template is rendrered (T1304688)', function(assert) {
+            assert.expect(2);
+
+            this.reinit({
+                items: [{ text: 'some text' }],
+                messageTemplate: () => {
+                    const $groupContent = this.$element.find(`.${CHAT_MESSAGEGROUP_CONTENT_CLASS}`);
+                    const $bubble = this.$element.find(`.${CHAT_MESSAGEBUBBLE_CLASS}`);
+
+                    assert.strictEqual($groupContent.length, 1, 'group content element exists');
+                    assert.strictEqual($bubble.length, 1, 'bubble element exists');
+                },
+            });
+        });
     });
 });