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

@@ -113,11 +113,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 {
@@ -145,7 +144,9 @@ 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, index) => {
       const shouldCreateEditedElement = index !== 0 && message.type !== 'image' && (message as TextMessage).isEdited === true && !message.isDeleted;
@@ -158,8 +159,6 @@ class MessageGroup extends Widget<Properties> {
 
       this._renderMessageBubble(message);
     });
-
-    this._$messageBubbleContainer.appendTo(this.element());
   }
 
   _renderMessageGroupInformation(message: Message, shouldRenderEditedMessage?: boolean): void {

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

@@ -8,6 +8,7 @@ import localization from 'localization';
 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 CHAT_MESSAGE_EDITED_TEXT_CLASS = 'dx-chat-message-edited-text';
 
@@ -310,6 +311,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');
+                },
+            });
+        });
     });
 
     QUnit.module('localization', moduleConfig, () => {