Chat: Update input auto resize class setting condition

Author: marker dao ®

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

@@ -4,7 +4,6 @@ import devices from '@js/core/devices';
 import type { DefaultOptionsRule } from '@js/core/options/utils';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
-import { getOuterHeight } from '@js/core/utils/size';
 import type { DxEvent, NativeEventInfo } from '@js/events';
 import type {
   ClickEvent,
@@ -404,29 +403,14 @@ class ChatTextArea extends TextArea<Properties> {
 
   _renderButtonContainers(): void {}
 
-  _getHeightDifference($input: dxElementWrapper): number {
-    const baseDifference = super._getHeightDifference($input);
-
-    const gap = parseFloat(this.$element().css('gap') ?? '0');
-
-    const informerHeight = this._informer ? getOuterHeight(this._informer.$element()) : 0;
-    const fileUploaderHeight = getOuterHeight(this._$fileUploader);
-    const toolbarHeight = getOuterHeight(this._$toolbar);
-
-    const visibleSections = [
-      toolbarHeight,
-      informerHeight,
-      fileUploaderHeight,
-    ].filter(Boolean).length;
-
-    const totalExtraHeight = toolbarHeight
-      + informerHeight
-      + fileUploaderHeight
-      + visibleSections * gap;
+  _getAdjustedMaxHeight(maxHeight: number): number {
+    return maxHeight;
+  }
 
-    const difference: number = baseDifference + totalExtraHeight;
+  _getMaxHeight(): number | undefined {
+    const maxHeight = parseFloat(this._input().css('maxHeight') ?? '0');
 
-    return difference;
+    return maxHeight;
   }
 
   _keyPressHandler(e: InputEvent): void {

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

@@ -17,7 +17,7 @@ import TextBox from '@ts/ui/text_box/m_text_box';
 import { allowScroll, prepareScrollData } from '@ts/ui/text_box/m_utils.scroll';
 
 export const TEXTAREA_CLASS = 'dx-textarea';
-const TEXTEDITOR_INPUT_CLASS_AUTO_RESIZE = 'dx-texteditor-input-auto-resize';
+export const TEXTEDITOR_INPUT_CLASS_AUTO_RESIZE = 'dx-texteditor-input-auto-resize';
 
 export interface TextAreaProperties extends Omit<Properties,
 'onChange' | 'onCopy' | 'onCut' | 'onEnterKey' | 'onFocusIn' | 'onFocusOut' | 'onInput' |
@@ -191,18 +191,20 @@ class TextArea<
     this._renderDimensions();
 
     const minHeight = this._getBoundaryHeight('minHeight');
-    const maxHeight = this._getBoundaryHeight('maxHeight');
+    const maxHeight = this._getMaxHeight();
+
     let inputHeight = $input[0].scrollHeight;
 
     if (minHeight !== undefined) {
       inputHeight = Math.max(inputHeight, minHeight - heightDifference);
     }
 
     if (maxHeight !== undefined) {
-      const adjustedMaxHeight = maxHeight - heightDifference;
-      const needScroll = inputHeight > adjustedMaxHeight;
+      const adjustedMaxHeight = this._getAdjustedMaxHeight(maxHeight, heightDifference);
+      const needScroll = this._isScrollNeeded(inputHeight, adjustedMaxHeight);
 
       inputHeight = Math.min(inputHeight, adjustedMaxHeight);
+
       this._updateInputAutoResizeAppearance($input, !needScroll);
     }
 
@@ -213,6 +215,27 @@ class TextArea<
     }
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  _getAdjustedMaxHeight(maxHeight: number, heightDifference: number): number {
+    const adjustedMaxHeight = maxHeight - heightDifference;
+
+    return adjustedMaxHeight;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _isScrollNeeded(
+    inputHeight: number,
+    adjustedMaxHeight: number,
+  ): boolean {
+    const needScroll = inputHeight > adjustedMaxHeight;
+
+    return needScroll;
+  }
+
+  _getMaxHeight(): number | undefined {
+    return this._getBoundaryHeight('maxHeight');
+  }
+
   _getBoundaryHeight(optionName: string): number | undefined {
     const boundaryValue = this.option(optionName);
 

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

@@ -9,6 +9,7 @@ import FileUploader, { FILEUPLOADER_CLASS, FILEUPLOADER_CANCEL_BUTTON_CLASS } fr
 import { BUTTON_CLASS } from '__internal/ui/button/button';
 import Informer, { INFORMER_CLASS, INFORMER_TEXT_CLASS } from '__internal/ui/informer/informer';
 import { TEXTEDITOR_INPUT_CLASS } from '__internal/ui/text_box/m_text_editor.base';
+import { TEXTEDITOR_INPUT_CLASS_AUTO_RESIZE } from '__internal/ui/m_text_area';
 
 const fakeFile = {
     name: 'fakefile.png',
@@ -868,4 +869,48 @@ QUnit.module('ChatTextArea', moduleConfig, () => {
             });
         });
     });
+
+    QUnit.module('MaxHeight and scroll behavior', () => {
+        QUnit.test('input should have auto-resize class by default', function(assert) {
+            const hasAutoResizeClass = this.$input.hasClass(TEXTEDITOR_INPUT_CLASS_AUTO_RESIZE);
+
+            assert.ok(hasAutoResizeClass, 'input has auto-resize class');
+        });
+
+        QUnit.test('textarea should expand when text is added', function(assert) {
+            const initialHeight = this.$input.height();
+
+            this.typeText('Line 1\nLine 2\nLine 3');
+
+            const heightAfterTyping = this.$input.height();
+
+            assert.ok(heightAfterTyping > initialHeight, 'textarea height increased after adding multiline text');
+        });
+
+        QUnit.test('textarea should not exceed default maxHeight', function(assert) {
+            const longText = Array(100).fill('Line of text that should cause scrolling').join('\n');
+            this.typeText(longText);
+
+            const inputHeight = this.$input.height();
+            const maxHeightValue = parseFloat(this.$input.css('maxHeight'));
+
+            assert.roughEqual(inputHeight, maxHeightValue, 0.01, 'input height respects default maxHeight');
+            assert.notStrictEqual(maxHeightValue, undefined, 'default maxHeight is applied');
+        });
+
+        QUnit.test('textarea height should be restored after clearing text', function(assert) {
+            const initialHeight = this.$input.height();
+
+            this.typeText('Line 1\nLine 2\nLine 3\nLine 4\nLine 5');
+
+            const heightWithText = this.$input.height();
+            assert.ok(heightWithText > initialHeight, 'height increased with text');
+
+            this.instance.option('value', '');
+
+            const heightAfterClear = this.$input.height();
+
+            assert.roughEqual(heightAfterClear, initialHeight, 0.01, 'height is restored after clearing text');
+        });
+    });
 });