Chat: use resizeObserver to update scrollbar size and position

e2e/testcafe-devextreme/tests/chat/messageList.ts

@@ -1,6 +1,9 @@
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import Chat from 'devextreme-testcafe-models/chat';
-import { createUser, generateMessages } from './data';
+import { ClientFunction } from 'testcafe';
+import { User } from 'devextreme/ui/chat';
+import TabPanel from 'devextreme-testcafe-models/tabPanel';
+import { createUser, generateMessages, getLongText } from './data';
 import url from '../../helpers/getPageUrl';
 import { createWidget } from '../../helpers/createWidget';
 import { testScreenshot } from '../../helpers/themeUtils';
@@ -45,8 +48,48 @@ test('Messagelist empty view scenarios', async (t) => {
 test('Messagelist appearance with scrollbar', async (t) => {
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
+  const chat = new Chat('#container');
+
+  await t
+    .hover(chat.messageList)
+    .wait(400);
+
   await testScreenshot(t, takeScreenshot, 'Messagelist with a lot of messages.png', { element: '#container' });
 
+  await ClientFunction(
+    () => {
+      const instance = chat.getInstance();
+      instance.renderMessage({
+        author: instance.option('user') as User,
+        text: 'Lorem ipsum dolor sit amet, \nconsectetur adipiscing elit. Sed do eiusmod tempor \nincididunt ut labore et dolore magna aliqua. Ut enim ad minim \nveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \nnex ea commodo consequat.',
+      });
+    },
+    { dependencies: { chat } },
+  )();
+
+  await testScreenshot(t, takeScreenshot, 'Messagelist scrollbar position after call renderMessage().png', { element: '#container' });
+
+  await t
+    .typeText(chat.getInput(), getLongText())
+    .pressKey('shift+enter');
+
+  await testScreenshot(t, takeScreenshot, 'Messagelist scrollbar position after typing in textarea.png', { element: '#container' });
+
+  await t
+    .pressKey('enter');
+
+  await testScreenshot(t, takeScreenshot, 'Messagelist scrollbar position after send.png', { element: '#container' });
+
+  const scrollable = chat.getScrollable();
+  const topOffset = (await scrollable.scrollOffset()).top;
+
+  await scrollable.scrollTo({ top: topOffset - 100 });
+
+  await t
+    .typeText(chat.getInput(), getLongText());
+
+  await testScreenshot(t, takeScreenshot, 'Messagelist scrollbar middle position after typing in textarea.png', { element: '#container' });
+
   await t
     .expect(compareResults.isValid())
     .ok(compareResults.errorMessages());
@@ -63,3 +106,42 @@ test('Messagelist appearance with scrollbar', async (t) => {
     height: 600,
   });
 });
+
+test('Messagelist should scrolled to the latest messages after being rendered inside an invisible element', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const tabPanel = new TabPanel('#container');
+
+  await t
+    .click(tabPanel.tabs.getItem(1).element);
+
+  await testScreenshot(t, takeScreenshot, 'Messagelist scroll position after rendering in invisible container.png', { element: '#container' });
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => {
+  const userFirst = createUser(1, 'First');
+  const userSecond = createUser(2, 'Second');
+
+  const items = generateMessages(17, userFirst, userSecond, true, false, 2);
+
+  return createWidget('dxTabPanel', {
+    width: 400,
+    height: 500,
+    deferRendering: true,
+    templatesRenderAsynchronously: true,
+    dataSource: [{
+      title: 'Tab_1',
+      collapsible: true,
+      text: 'Tab_1 content',
+    }, {
+      title: 'Tab_2',
+      collapsible: true,
+      template: ClientFunction(() => ($('<div>') as any).dxChat({
+        items,
+        user: userSecond,
+      }), { dependencies: { items, userSecond } }),
+    }],
+  });
+});

packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss

@@ -4,14 +4,19 @@
   flex-grow: 1;
   overflow: hidden;
 
+  .dx-scrollable-container {
+    overscroll-behavior: contain;
+    will-change: scroll-position;
+  }
+
   .dx-scrollable-content {
     display: flex;
     flex-direction: column;
     width: 100%;
   }
 
   .dx-scrollable-native {
-    &.dx-scrollable-native-ios{
+    &.dx-scrollable-native-ios {
       .dx-scrollable-content {
         min-height: 100%;
       }

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

@@ -61,8 +61,6 @@ class Chat extends Widget<Properties> {
 
     this._renderMessageList();
     this._renderMessageBox();
-
-    this._messageList.update();
   }
 
   _renderHeader(title: string): void {
@@ -138,10 +136,6 @@ class Chat extends Widget<Properties> {
     return $input;
   }
 
-  _dimensionChanged(): void {
-    this._messageList.update();
-  }
-
   _optionChanged(args: OptionChanged<Properties>): void {
     const { name, value } = args;
 

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

@@ -1,6 +1,5 @@
 import $ from '@js/core/renderer';
 import type { NativeEventInfo } from '@js/events';
-import { triggerResizeEvent } from '@js/events/visibility_change';
 import type { ClickEvent } from '@js/ui/button';
 import Button from '@js/ui/button';
 import type { Properties as DOMComponentProperties } from '@ts/core/widget/dom_component';
@@ -91,8 +90,6 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
         const shouldButtonBeDisabled = !this._isValuableTextEntered();
 
         this._toggleButtonDisableState(shouldButtonBeDisabled);
-
-        triggerResizeEvent(this.$element().parent());
       },
       onEnterKey: (e: EnterKeyEvent): void => {
         if (!e.event?.shiftKey) {

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

@@ -1,12 +1,21 @@
+import domAdapter from '@js/core/dom_adapter';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
+import resizeObserverSingleton from '@js/core/resize_observer';
+import { contains } from '@js/core/utils/dom';
+import { hasWindow } from '@js/core/utils/window';
 import messageLocalization from '@js/localization/message';
+import {
+  isReachedBottom,
+} from '@js/renovation/ui/scroll_view/utils/get_boundary_props';
+import { getScrollTopMax } from '@js/renovation/ui/scroll_view/utils/get_scroll_top_max';
 import type { Message } from '@js/ui/chat';
 import Scrollable from '@js/ui/scroll_view/ui.scrollable';
 import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 
+import { isElementVisible } from '../splitter/utils/layout';
 import type { MessageGroupAlignment } from './messagegroup';
 import MessageGroup from './messagegroup';
 
@@ -23,7 +32,11 @@ export interface Properties extends WidgetOptions<MessageList> {
 }
 
 class MessageList extends Widget<Properties> {
-  _messageGroups?: MessageGroup[];
+  private _messageGroups?: MessageGroup[];
+
+  private _containerClientHeight = 0;
+
+  private _suppressResizeHandling?: boolean;
 
   private _scrollable!: Scrollable<unknown>;
 
@@ -50,7 +63,47 @@ class MessageList extends Widget<Properties> {
 
     this._renderMessageListContent();
 
-    this.update();
+    this._attachResizeObserverSubscription();
+
+    this._suppressResizeHandling = true;
+  }
+
+  _attachResizeObserverSubscription(): void {
+    if (hasWindow()) {
+      const element = this._getScrollContainer();
+
+      resizeObserverSingleton.unobserve(element);
+      resizeObserverSingleton.observe(element, (entry) => this._resizeHandler(entry));
+    }
+  }
+
+  _isAttached(element: Element): boolean {
+    return !!contains(domAdapter.getBody(), element);
+  }
+
+  _resizeHandler({ contentRect, target }: ResizeObserverEntry): void {
+    const newHeight = contentRect.height;
+
+    if (this._suppressResizeHandling
+      && this._isAttached(target)
+      && isElementVisible(target as HTMLElement)
+    ) {
+      this._scrollContentToLastMessage();
+
+      this._suppressResizeHandling = false;
+    } else {
+      const heightChange = this._containerClientHeight - newHeight;
+
+      let { scrollTop } = target;
+
+      if (heightChange >= 1 || !isReachedBottom(target as HTMLDivElement, target.scrollTop, 0, 1)) {
+        scrollTop += heightChange;
+      }
+
+      this._scrollable.scrollTo({ top: scrollTop });
+    }
+
+    this._containerClientHeight = newHeight;
   }
 
   _renderEmptyViewContent(): void {
@@ -162,23 +215,30 @@ class MessageList extends Widget<Properties> {
 
       if (sender?.id === lastMessageGroupUserId) {
         lastMessageGroup.renderMessage(message);
-        this.update();
+        this._scrollContentToLastMessage();
 
         return;
       }
     }
 
     this._createMessageGroupComponent([message], sender?.id);
 
-    this.update();
+    this._scrollContentToLastMessage();
   }
 
   _$content(): dxElementWrapper {
     return $(this._scrollable.content());
   }
 
   _scrollContentToLastMessage(): void {
-    this._scrollable.scrollTo({ top: this._$content().get(0).scrollHeight });
+    const scrollOffsetTopMax = getScrollTopMax(this._getScrollContainer());
+
+    this._scrollable.scrollTo({ top: scrollOffsetTopMax });
+  }
+
+  _getScrollContainer(): HTMLElement {
+    // @ts-expect-error
+    return $(this._scrollable.container()).get(0);
   }
 
   _clean(): void {
@@ -238,13 +298,6 @@ class MessageList extends Widget<Properties> {
         super._optionChanged(args);
     }
   }
-
-  update(): void {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this._scrollable.update();
-
-    this._scrollContentToLastMessage();
-  }
 }
 
 export default MessageList;