fix: render message avatars with Lit to keep them on items update (#7240

) (#7242) Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Mar 19, 2024 · 6628afc · 6628afc
1 parent f5f5413
commit 6628afc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/message-list/src/vaadin-message-list.js b/packages/message-list/src/vaadin-message-list.js
@@ -163,8 +163,8 @@ class MessageList extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(Poly
                 theme="${ifDefined(item.theme)}"
                 class="${ifDefined(item.className)}"
                 @focusin="${this._onMessageFocusIn}"
-                >${item.text}</vaadin-message
-              >
+                >${item.text}<vaadin-avatar slot="avatar"></vaadin-avatar
+              ></vaadin-message>
             `,
         )}
       `,

diff --git a/packages/message-list/test/message-list.test.js b/packages/message-list/test/message-list.test.js
@@ -144,6 +144,12 @@ describe('message-list', () => {
         expect(items[0]).to.eql(firstMessage);
         expect(items[1]).to.not.eql(firstMessage);
       });
+
+      it('should not remove vaadin-avatar elements when updating items', async () => {
+        messageList.items = [{ text: '', userName: 'Assistant' }];
+        await nextRender();
+        expect(messageList.querySelector('vaadin-avatar')).to.be.ok;
+      });
     });
 
     describe('scroll', () => {