[FIX] mail: fix race conditions, especially with scroll

The `_update` of some components must take place before the `_update`
of other (usually sibling) components that might directly influence their
layout. This is in particular the case for `_update` that are relying on height.

Prevent force save of scroll position if there are pending hints to adjust it,
and prevent pending hints from overriding new scroll value.

Prevent flicker with message date.

This should fix all known issues related to incorrectly saving or restoring
scroll position.

task-2344226
task-2358066
task-2369332
task-2372339
task-2373741

closes odoo/odoo#61054

Related: odoo/enterprise#14736
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

2 files changed, 10 insertions, 17 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 c2cc133417a..5afb99c4990 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
@@ -2,6 +2,7 @@ odoo.define('mail/static/src/components/composer_text_input/composer_text_input.
 'use strict';
 
 const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js');
 
 const components = {
     ComposerSuggestionList: require('mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js'),
@@ -29,6 +30,11 @@ class ComposerTextInput extends Component {
             };
         });
         /**
+         * Updates the composer text input content when composer is mounted
+         * as textarea content can't be changed from the DOM.
+         */
+        useUpdate({ func: () => this._update() });
+        /**
          * Last content of textarea from input event. Useful to determine
          * whether the current partner is typing something.
          */
@@ -39,22 +45,6 @@ class ComposerTextInput extends Component {
         this._textareaRef = useRef('textarea');
     }
 
-    /**
-     * Updates the composer text input content when composer is mounted
-     * as textarea content can't be changed from the DOM.
-     */
-    mounted() {
-        this._update();
-    }
-
-    /**
-     * Updates the composer text input content when composer has changed
-     * as textarea content can't be changed from the DOM.
-     */
-    patched() {
-        this._update();
-    }
-
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
@@ -153,6 +143,9 @@ class ComposerTextInput extends Component {
      * @private
      */
     _update() {
+        if (!this.composer) {
+            return;
+        }
         this._textareaRef.el.value = this.composer.textInputContent;
         this._textareaRef.el.setSelectionRange(
             this.composer.textInputCursorStart,
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 dfa7bbd1182..493acbb1b4f 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,7 @@
                         isBelow="props.hasMentionSuggestionsBelowPosition"
                     />
                 </t>
-                <textarea class="o_ComposerTextInput_textarea" 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"/>
+                <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"/>
             </t>
         </div>
     </t>