[FIX] mail: increase chatter max-height.

We go back to the fake textarea to avoid a flickering created by the
`this._textareaRef.el.style.height = "0px";`.
This height reset create an unwanted scrollbar jump that could hide the content
of the textarea (not aside mode).

task-2390354

closes odoo/odoo#62588

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

3 files changed, 25 insertions, 5 deletions

diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.js b/addons/mail/static/src/components/composer_text_input/composer_text_input.js
index 38b6cf30014..7830667ce7c 100644
--- a/addons/mail/static/src/components/composer_text_input/composer_text_input.js
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.js
@@ -43,6 +43,12 @@ class ComposerTextInput extends Component {
          * Reference of the textarea. Useful to set height, selection and content.
          */
         this._textareaRef = useRef('textarea');
+        /**
+         * This is the invisible textarea used to compute the composer height
+         * based on the text content. We need it to downsize the textarea
+         * properly without flicker.
+         */
+        this._mirroredTextareaRef = useRef('mirroredTextarea');
     }
 
     //--------------------------------------------------------------------------
@@ -148,6 +154,7 @@ class ComposerTextInput extends Component {
             return;
         }
         this._textareaRef.el.value = this.composer.textInputContent;
+        this._mirroredTextareaRef.el.value = this.composer.textInputContent;
         this._textareaRef.el.setSelectionRange(
             this.composer.textInputCursorStart,
             this.composer.textInputCursorEnd,
@@ -162,8 +169,7 @@ class ComposerTextInput extends Component {
      * @private
      */
     _updateHeight() {
-        this._textareaRef.el.style.height = "0px";
-        this._textareaRef.el.style.height = (this._textareaRef.el.scrollHeight) + "px";
+        this._textareaRef.el.style.height = (this._mirroredTextareaRef.el.scrollHeight) + "px";
     }
 
     //--------------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
index 540fca6bc3e..f4b9b225738 100644
--- a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss
@@ -7,7 +7,15 @@
     position: relative;
 }
 
-.o_ComposerTextInput_textarea {
+.o_ComposerTextInput_mirroredTextarea {
+    height: 0;
+    position: absolute;
+    opacity: 0;
+    overflow: hidden;
+    top: -10000;
+}
+
+.o_ComposerTextInput_textareaStyle {
     padding: 10px;
     resize: none;
     border-radius: $o-mail-rounded-rectangle-border-radius-lg;
@@ -27,6 +35,6 @@
     &:not(.o-composer-is-compact) {
         // Don't allow the input to take the whole height when it's not compact
         // (like in chatter for example) but allow it to take some more place
-        max-height: 150px;
+        max-height: 400px;
     }
 }
diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
index 493acbb1b4f..5b120fabd90 100644
--- a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
+++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml
@@ -10,7 +10,13 @@
                         isBelow="props.hasMentionSuggestionsBelowPosition"
                     />
                 </t>
-                <textarea class="o_ComposerTextInput_textarea" t-att-class="{ 'o-composer-is-compact': props.isCompact }" style="height: 0;" t-esc="composer.textInputContent" t-att-placeholder="textareaPlaceholder" t-on-focusin="_onFocusinTextarea" t-on-focusout="_onFocusoutTextarea" t-on-keydown="_onKeydownTextarea" t-on-keyup="_onKeyupTextarea" t-on-input="_onInputTextarea" t-ref="textarea"/>
+                <textarea class="o_ComposerTextInput_textarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': props.isCompact }" t-esc="composer.textInputContent" t-att-placeholder="textareaPlaceholder" t-on-focusin="_onFocusinTextarea" t-on-focusout="_onFocusoutTextarea" t-on-keydown="_onKeydownTextarea" t-on-keyup="_onKeyupTextarea" t-on-input="_onInputTextarea" t-ref="textarea"/>
+                <!--
+                     This is an invisible textarea used to compute the composer
+                     height based on the text content. We need it to downsize
+                     the textarea properly without flicker.
+                -->
+                <textarea class="o_ComposerTextInput_mirroredTextarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': props.isCompact }" t-esc="composer.textInputContent" t-ref="mirroredTextarea" disabled="1"/>
             </t>
         </div>
     </t>