From 0c10101c2e09a54917c030f4a057691bca68f0e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20K=C3=BChn?= <aku@odoo.com>
Date: Fri, 19 Nov 2021 12:06:28 +0000
Subject: [PATCH] [IMP] mail, *: use component ref instead of component el
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

*: snailmail, website_livechat

In preparation of using OWL v2 in discuss code

Task-2694242

closes odoo/odoo#80094

Related: odoo/enterprise#22394
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>
---
 .../src/components/activity/activity.xml       |  2 +-
 .../components/activity_box/activity_box.xml   |  2 +-
 .../activity_mark_done_popover.xml             |  2 +-
 .../attachment_box/attachment_box.xml          |  2 +-
 .../attachment_card/attachment_card.xml        |  2 +-
 .../attachment_delete_confirm_dialog.js        | 13 ++-----------
 .../attachment_delete_confirm_dialog.xml       |  2 +-
 .../attachment_image/attachment_image.xml      |  2 +-
 .../attachment_list/attachment_list.xml        |  2 +-
 .../attachment_viewer/attachment_viewer.js     |  4 ++--
 .../attachment_viewer/attachment_viewer.xml    |  2 +-
 .../autocomplete_input/autocomplete_input.js   | 14 +++++++-------
 .../autocomplete_input/autocomplete_input.xml  |  2 +-
 .../channel_invitation_form.xml                |  2 +-
 .../channel_member_list.xml                    |  2 +-
 .../src/components/chat_window/chat_window.js  |  4 ++--
 .../src/components/chat_window/chat_window.xml |  2 +-
 .../chat_window_header/chat_window_header.xml  |  2 +-
 .../chat_window_hidden_menu.js                 |  6 +++---
 .../chat_window_hidden_menu.xml                |  2 +-
 .../chat_window_manager.xml                    |  2 +-
 .../static/src/components/chatter/chatter.xml  |  2 +-
 .../chatter_container/chatter_container.xml    |  2 +-
 .../chatter_topbar/chatter_topbar.xml          |  2 +-
 .../static/src/components/composer/composer.js |  2 +-
 .../src/components/composer/composer.xml       |  1 +
 .../composer_suggested_recipient.xml           |  2 +-
 .../composer_suggested_recipient_list.xml      |  2 +-
 .../composer_suggestion/composer_suggestion.js |  2 +-
 .../composer_suggestion.xml                    |  2 +-
 .../composer_suggestion_list.xml               |  2 +-
 .../composer_text_input/composer_text_input.js |  2 +-
 .../composer_text_input.xml                    |  2 +-
 .../delete_message_confirm_dialog.js           |  1 -
 .../delete_message_confirm_dialog.xml          |  2 +-
 .../static/src/components/dialog/dialog.xml    |  2 +-
 .../dialog_manager/dialog_manager.xml          |  2 +-
 .../static/src/components/discuss/discuss.xml  |  1 +
 .../discuss_mobile_mailbox_selection.xml       |  2 +-
 .../discuss_public_view.xml                    |  2 +-
 .../discuss_sidebar/discuss_sidebar.xml        |  2 +-
 .../discuss_sidebar_category.xml               |  2 +-
 .../discuss_sidebar_category_item.xml          |  1 +
 .../discuss_sidebar_mailbox.xml                |  1 +
 .../src/components/drop_zone/drop_zone.js      |  2 +-
 .../src/components/drop_zone/drop_zone.xml     |  2 +-
 .../emojis_popover/emojis_popover.js           |  2 +-
 .../emojis_popover/emojis_popover.xml          |  2 +-
 .../components/file_uploader/file_uploader.xml |  2 +-
 .../components/follow_button/follow_button.xml |  2 +-
 .../src/components/follower/follower.xml       |  2 +-
 .../follower_list_menu/follower_list_menu.xml  |  2 +-
 .../follower_subtype/follower_subtype.xml      |  2 +-
 .../follower_subtype_list.xml                  |  2 +-
 .../components/mail_template/mail_template.xml |  2 +-
 .../components/media_preview/media_preview.xml |  2 +-
 .../static/src/components/message/message.js   | 18 +++++++++---------
 .../static/src/components/message/message.xml  |  1 +
 .../message_action_list.xml                    |  2 +-
 .../message_author_prefix.xml                  |  2 +-
 .../message_in_reply_to_view.xml               |  2 +-
 .../components/message_list/message_list.js    |  2 +-
 .../components/message_list/message_list.xml   |  2 +-
 .../message_reaction_group.xml                 |  2 +-
 .../message_seen_indicator.xml                 |  2 +-
 .../messaging_menu/messaging_menu.js           |  2 +-
 .../messaging_menu/messaging_menu.xml          |  2 +-
 .../mobile_messaging_navbar.xml                |  2 +-
 .../notification_alert/notification_alert.xml  |  2 +-
 .../notification_group/notification_group.xml  |  2 +-
 .../notification_list/notification_list.xml    |  2 +-
 .../notification_popover.xml                   |  2 +-
 .../notification_request.xml                   |  2 +-
 .../partner_im_status_icon.xml                 |  1 +
 .../components/popover_view/popover_view.xml   |  2 +-
 .../rtc_activity_notice.xml                    |  2 +-
 .../rtc_call_participant_card.xml              |  1 +
 .../rtc_call_viewer/rtc_call_viewer.js         |  2 +-
 .../rtc_call_viewer/rtc_call_viewer.xml        |  2 +-
 .../rtc_configuration_menu.xml                 |  2 +-
 .../rtc_controller/rtc_controller.xml          |  2 +-
 .../rtc_invitation_card.xml                    |  2 +-
 .../rtc_invitations/rtc_invitations.xml        |  2 +-
 .../rtc_layout_menu/rtc_layout_menu.xml        |  2 +-
 .../rtc_option_list/rtc_option_list.xml        |  2 +-
 .../src/components/rtc_video/rtc_video.js      |  9 ++++-----
 .../src/components/rtc_video/rtc_video.xml     |  2 +-
 .../src/components/thread_icon/thread_icon.xml |  2 +-
 .../thread_needaction_preview.xml              |  2 +-
 .../thread_preview/thread_preview.xml          |  2 +-
 .../thread_textual_typing_status.xml           |  2 +-
 .../thread_typing_icon/thread_typing_icon.xml  |  2 +-
 .../src/components/thread_view/thread_view.xml |  2 +-
 .../thread_view_topbar/thread_view_topbar.xml  |  2 +-
 .../components/welcome_view/welcome_view.xml   |  2 +-
 .../src/models/popover_view/popover_view.js    |  4 ++--
 .../static/src/utils/messaging_component.js    |  3 +++
 .../snailmail_error_dialog.js                  | 15 +++------------
 .../snailmail_error_dialog.xml                 |  2 +-
 .../snailmail_notification_popover.xml         |  2 +-
 .../visitor_banner/visitor_banner.xml          |  2 +-
 101 files changed, 127 insertions(+), 137 deletions(-)

diff --git a/addons/mail/static/src/components/activity/activity.xml b/addons/mail/static/src/components/activity/activity.xml
index 2f79c890eea..fdb34eb646d 100644
--- a/addons/mail/static/src/components/activity/activity.xml
+++ b/addons/mail/static/src/components/activity/activity.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.Activity" owl="1">
-        <div class="o_Activity" t-on-click="_onClick">
+        <div class="o_Activity" t-on-click="_onClick" t-ref="root">
             <t t-if="activity">
                 <div class="o_Activity_sidebar">
                     <div class="o_Activity_user">
diff --git a/addons/mail/static/src/components/activity_box/activity_box.xml b/addons/mail/static/src/components/activity_box/activity_box.xml
index 6ce8af208e1..d2f6e6d1ea7 100644
--- a/addons/mail/static/src/components/activity_box/activity_box.xml
+++ b/addons/mail/static/src/components/activity_box/activity_box.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ActivityBox" owl="1">
-        <div class="o_ActivityBox">
+        <div class="o_ActivityBox" t-ref="root">
             <t t-if="activityBoxView">
                 <a role="button" class="o_ActivityBox_title btn" t-on-click="activityBoxView.onClickActivityBoxTitle">
                     <hr class="o_ActivityBox_titleLine" />
diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml
index ba645cd545e..387b5f9d62a 100644
--- a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml
+++ b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ActivityMarkDonePopover" owl="1">
-        <div class="o_ActivityMarkDonePopover" t-on-keydown="_onKeydown">
+        <div class="o_ActivityMarkDonePopover" t-on-keydown="_onKeydown" t-ref="root">
             <t t-if="activity">
                 <textarea class="form-control o_ActivityMarkDonePopover_feedback" rows="3" placeholder="Write Feedback" t-on-blur="_onBlur" t-ref="feedbackTextarea"/>
                 <div class="o_ActivityMarkDonePopover_buttons">
diff --git a/addons/mail/static/src/components/attachment_box/attachment_box.xml b/addons/mail/static/src/components/attachment_box/attachment_box.xml
index 1e151ea42aa..1513aefcff9 100644
--- a/addons/mail/static/src/components/attachment_box/attachment_box.xml
+++ b/addons/mail/static/src/components/attachment_box/attachment_box.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.AttachmentBox" owl="1">
-        <div class="o_AttachmentBox">
+        <div class="o_AttachmentBox" t-ref="root">
             <t t-if="attachmentBoxView">
                 <div class="o_AttachmentBox_title">
                     <hr class="o_AttachmentBox_dashedLine"/>
diff --git a/addons/mail/static/src/components/attachment_card/attachment_card.xml b/addons/mail/static/src/components/attachment_card/attachment_card.xml
index b68e114e9a0..09dbc0d3e22 100644
--- a/addons/mail/static/src/components/attachment_card/attachment_card.xml
+++ b/addons/mail/static/src/components/attachment_card/attachment_card.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.AttachmentCard" owl="1">
-        <div>
+        <div t-ref="root">
             <t t-if="attachmentCard">
                 <div class="o_AttachmentCard d-flex o-has-card-details"
                      t-att-class="{
diff --git a/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js
index 1f498c95bc5..5e180737745 100644
--- a/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js
+++ b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js
@@ -9,15 +9,6 @@ const { useRef } = owl.hooks;
 
 export class AttachmentDeleteConfirmDialog extends Component {
 
-    /**
-     * @override
-     */
-    setup() {
-        super.setup();
-        // to manually trigger the dialog close event
-        this._dialogRef = useRef('dialog');
-    }
-
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
@@ -54,7 +45,7 @@ export class AttachmentDeleteConfirmDialog extends Component {
      * @private
      */
     _onClickCancel() {
-        this._dialogRef.comp._close();
+        this.root.comp._close();
     }
 
     /**
@@ -62,7 +53,7 @@ export class AttachmentDeleteConfirmDialog extends Component {
      */
     async _onClickOk() {
         await this.attachment.remove();
-        this._dialogRef.comp._close();
+        this.root.comp._close();
         this.trigger('o-attachment-removed', { attachmentLocalId: this.props.attachmentLocalId });
     }
 
diff --git a/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.xml b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.xml
index 6b466a9ba2d..8b88f57d60d 100644
--- a/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.xml
+++ b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.AttachmentDeleteConfirmDialog" owl="1">
-        <Dialog contentClass="'o_AttachmentDeleteConfirmDialog'" title="getTitle()" size="'medium'" t-ref="dialog">
+        <Dialog contentClass="'o_AttachmentDeleteConfirmDialog'" title="getTitle()" size="'medium'" t-ref="root">
             <p class="o_AttachmentDeleteConfirmDialog_mainText" t-esc="getBody()"/>
             <t t-set-slot="buttons">
                 <button class="o_AttachmentDeleteConfirmDialog_confirmButton btn btn-primary" t-on-click="_onClickOk">Ok</button>
diff --git a/addons/mail/static/src/components/attachment_image/attachment_image.xml b/addons/mail/static/src/components/attachment_image/attachment_image.xml
index 3eb2b2cd80a..892245ba198 100644
--- a/addons/mail/static/src/components/attachment_image/attachment_image.xml
+++ b/addons/mail/static/src/components/attachment_image/attachment_image.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.AttachmentImage" owl="1">
-        <div>
+        <div t-ref="root">
             <t t-if="attachmentImage">
                 <div class="o_AttachmentImage d-flex o-details-overlay position-relative"
                     t-att-class="{
diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.xml b/addons/mail/static/src/components/attachment_list/attachment_list.xml
index 0efe8cdcaaf..95804491fec 100644
--- a/addons/mail/static/src/components/attachment_list/attachment_list.xml
+++ b/addons/mail/static/src/components/attachment_list/attachment_list.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.AttachmentList" owl="1">
-        <div class="o_AttachmentList">
+        <div class="o_AttachmentList" t-ref="root">
             <t t-if="attachmentList">
                 <div class="o_AttachmentList_partialList o_AttachmentList_partialListImages">
                     <t t-foreach="attachmentList.attachmentImages" t-as="attachmentImage" t-key="attachmentImage.localId">
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js
index 1fa20790343..fa8088b3254 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js
@@ -57,7 +57,7 @@ export class AttachmentViewer extends Component {
     }
 
     _mounted() {
-        this.el.focus();
+        this.root.el.focus();
         this._handleImageLoad();
         this._hideUnwantedPdfJsButtons();
         document.addEventListener('click', this._onClickGlobal);
@@ -580,7 +580,7 @@ export class AttachmentViewer extends Component {
      */
     _onWheelImage(ev) {
         ev.stopPropagation();
-        if (!this.el) {
+        if (!this.root.el) {
             return;
         }
         if (ev.deltaY > 0) {
diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
index 0d20ea193fe..ad9566d056d 100644
--- a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
+++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.AttachmentViewer" owl="1">
-        <div class="o_AttachmentViewer" t-on-click="_onClick" t-on-keydown="_onKeydown" tabindex="0">
+        <div class="o_AttachmentViewer" t-on-click="_onClick" t-on-keydown="_onKeydown" tabindex="0" t-ref="root">
             <t t-if="attachmentViewer">
                 <div class="o_AttachmentViewer_header" t-on-click="_onClickHeader">
                     <t t-if="attachmentViewer.attachment.isViewable">
diff --git a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js
index c59055a7d62..1760220ffde 100644
--- a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js
+++ b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js
@@ -18,7 +18,7 @@ export class AutocompleteInput extends Component {
 
     _mounted() {
         if (this.props.isFocusOnMount) {
-            this.el.focus();
+            this.root.el.focus();
         }
 
         let args = {
@@ -33,7 +33,7 @@ export class AutocompleteInput extends Component {
             args.classes = { 'ui-autocomplete': this.props.customClass };
         }
 
-        const autoCompleteElem = $(this.el).autocomplete(args);
+        const autoCompleteElem = $(this.root.el).autocomplete(args);
         // Resize the autocomplete dropdown options to handle the long strings
         // By setting the width of dropdown based on the width of the input element.
         autoCompleteElem.data("ui-autocomplete")._resizeMenu = function () {
@@ -43,7 +43,7 @@ export class AutocompleteInput extends Component {
     }
 
     _willUnmount() {
-        $(this.el).autocomplete('destroy');
+        $(this.root.el).autocomplete('destroy');
     }
 
     //--------------------------------------------------------------------------
@@ -58,10 +58,10 @@ export class AutocompleteInput extends Component {
      * @returns {boolean}
      */
     contains(node) {
-        if (!this.el) {
+        if (!this.root.el) {
             return false;
         }
-        if (this.el.contains(node)) {
+        if (this.root.el.contains(node)) {
             return true;
         }
         if (!this.props.customClass) {
@@ -75,10 +75,10 @@ export class AutocompleteInput extends Component {
     }
 
     focus() {
-        if (!this.el) {
+        if (!this.root.el) {
             return;
         }
-        this.el.focus();
+        this.root.el.focus();
     }
 
     //--------------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.xml b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.xml
index ffa1bc890a4..9801b1d955c 100644
--- a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.xml
+++ b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.AutocompleteInput" owl="1">
-        <input class="o_AutocompleteInput" t-on-blur="_onBlur" t-on-keydown="_onKeydown" t-att-placeholder="props.placeholder"/>
+        <input class="o_AutocompleteInput" t-on-blur="_onBlur" t-on-keydown="_onKeydown" t-att-placeholder="props.placeholder" t-ref="root"/>
     </t>
 
 </templates>
diff --git a/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml b/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml
index 42a23b2e171..31fb94c7bb2 100644
--- a/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml
+++ b/addons/mail/static/src/components/channel_invitation_form/channel_invitation_form.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ChannelInvitationForm" owl="1">
-        <div class="o_ChannelInvitationForm d-flex flex-column" t-ref="channelInvitationForm">
+        <div class="o_ChannelInvitationForm d-flex flex-column" t-ref="root">
             <t t-if="channelInvitationForm">
                 <h3 class="mx-3 mt-3 mb-2">Invite people</h3>
                 <t t-if="!messaging.isCurrentUserGuest">
diff --git a/addons/mail/static/src/components/channel_member_list/channel_member_list.xml b/addons/mail/static/src/components/channel_member_list/channel_member_list.xml
index 48fd8b66800..52a72aea8c9 100644
--- a/addons/mail/static/src/components/channel_member_list/channel_member_list.xml
+++ b/addons/mail/static/src/components/channel_member_list/channel_member_list.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ChannelMemberList" owl="1">
-        <div class="o_ChannelMemberList d-flex flex-column overflow- bg-light">
+        <div class="o_ChannelMemberList d-flex flex-column overflow- bg-light" t-ref="root">
             <t t-if="channel.orderedOnlineMembers.length > 0">
                 <t t-call="mail.ChannelMemberList_memberList">
                     <t t-set="members" t-value="channel.orderedOnlineMembers"/>
diff --git a/addons/mail/static/src/components/chat_window/chat_window.js b/addons/mail/static/src/components/chat_window/chat_window.js
index 5b4dc311070..05ccb21820e 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.js
+++ b/addons/mail/static/src/components/chat_window/chat_window.js
@@ -70,8 +70,8 @@ export class ChatWindow extends Component {
         const textDirection = this.messaging.locale.textDirection;
         const offsetFrom = textDirection === 'rtl' ? 'left' : 'right';
         const oppositeFrom = offsetFrom === 'right' ? 'left' : 'right';
-        this.el.style[offsetFrom] = this.chatWindow.visibleOffset + 'px';
-        this.el.style[oppositeFrom] = 'auto';
+        this.root.el.style[offsetFrom] = this.chatWindow.visibleOffset + 'px';
+        this.root.el.style[oppositeFrom] = 'auto';
     }
 
     /**
diff --git a/addons/mail/static/src/components/chat_window/chat_window.xml b/addons/mail/static/src/components/chat_window/chat_window.xml
index 8bbbb61e837..4764880f9c4 100644
--- a/addons/mail/static/src/components/chat_window/chat_window.xml
+++ b/addons/mail/static/src/components/chat_window/chat_window.xml
@@ -9,7 +9,7 @@
                 'o-fullscreen': props.isFullscreen,
                 'o-mobile': messaging and messaging.device.isMobile,
                 'o-new-message': chatWindow and !chatWindow.thread,
-            }" t-on-keydown="_onKeydown" t-on-focusout="_onFocusout" t-att-data-chat-window-local-id="chatWindow ? chatWindow.localId : undefined" t-att-data-thread-local-id="chatWindow ? (chatWindow.thread ? chatWindow.thread.localId : '') : undefined"
+            }" t-on-keydown="_onKeydown" t-on-focusout="_onFocusout" t-att-data-chat-window-local-id="chatWindow ? chatWindow.localId : undefined" t-att-data-thread-local-id="chatWindow ? (chatWindow.thread ? chatWindow.thread.localId : '') : undefined" t-ref="root"
         >
             <t t-if="chatWindow">
                 <ChatWindowHeader
diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
index c91c92a3f84..09e93e2da9f 100644
--- a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
+++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ChatWindowHeader" owl="1">
-        <div class="o_ChatWindowHeader" t-att-class="{ 'o-mobile': messaging and messaging.device.isMobile }" t-on-click="_onClick">
+        <div class="o_ChatWindowHeader" t-att-class="{ 'o-mobile': messaging and messaging.device.isMobile }" t-on-click="_onClick" t-ref="root">
             <t t-if="chatWindow">
                 <t t-if="props.hasCloseAsBackButton">
                     <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose" t-att-class="{ 'o-mobile': messaging.device.isMobile }" t-on-click="_onClickClose" title="Close conversation">
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js
index 713d63d3357..a6b6bea94ce 100644
--- a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js
@@ -73,8 +73,8 @@ export class ChatWindowHiddenMenu extends Component {
         const offsetFrom = textDirection === 'rtl' ? 'left' : 'right';
         const oppositeFrom = offsetFrom === 'right' ? 'left' : 'right';
         const offset = this.messaging.chatWindowManager.visual.hidden.offset;
-        this.el.style[offsetFrom] = `${offset}px`;
-        this.el.style[oppositeFrom] = 'auto';
+        this.root.el.style[offsetFrom] = `${offset}px`;
+        this.root.el.style[oppositeFrom] = 'auto';
     }
 
     //--------------------------------------------------------------------------
@@ -89,7 +89,7 @@ export class ChatWindowHiddenMenu extends Component {
      * @param {MouseEvent} ev
      */
     _onClickCaptureGlobal(ev) {
-        if (!this.el || this.el.contains(ev.target)) {
+        if (!this.root.el || this.root.el.contains(ev.target)) {
             return;
         }
         this.messaging.chatWindowManager.closeHiddenMenu();
diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
index dd35c3a8f84..93853f54177 100644
--- a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
+++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ChatWindowHiddenMenu" owl="1">
-        <div class="dropup o_ChatWindowHiddenMenu">
+        <div class="dropup o_ChatWindowHiddenMenu" t-ref="root">
             <div class="dropdown-toggle o_ChatWindowHiddenMenu_dropdownToggle" t-att-class="{ show: messaging.chatWindowManager.isHiddenMenuOpen }" t-on-click="_onClickToggle">
                 <div class="fa fa-comments-o o_ChatWindowHiddenMenu_dropdownToggleIcon o_ChatWindowHiddenMenu_dropdownToggleItem"/>
                 <div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter text-truncate">
diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
index 9b6499e8036..95e13db50e5 100644
--- a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
+++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ChatWindowManager" owl="1">
-        <div class="o_ChatWindowManager">
+        <div class="o_ChatWindowManager" t-ref="root">
             <t t-if="messaging and messaging.chatWindowManager">
                 <!-- Note: DOM elements are ordered from left to right -->
                 <t t-if="messaging.chatWindowManager.hasHiddenChatWindows">
diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml
index 857c4440ef3..1858978ecf8 100644
--- a/addons/mail/static/src/components/chatter/chatter.xml
+++ b/addons/mail/static/src/components/chatter/chatter.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.Chatter" owl="1">
-        <div class="o_Chatter">
+        <div class="o_Chatter" t-ref="root">
             <t t-if="chatter">
                 <div class="o_Chatter_fixedPanel">
                     <ChatterTopbar
diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.xml b/addons/mail/static/src/components/chatter_container/chatter_container.xml
index 03266a5bd52..6f0a2bb61ea 100644
--- a/addons/mail/static/src/components/chatter_container/chatter_container.xml
+++ b/addons/mail/static/src/components/chatter_container/chatter_container.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ChatterContainer" owl="1">
-        <div class="o_ChatterContainer" data-command-category="mail">
+        <div class="o_ChatterContainer" data-command-category="mail" t-ref="root">
             <t t-if="chatter">
                 <Chatter chatterLocalId="chatter.localId"/>
             </t>
diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
index 3b4576803fd..d5e706d7007 100644
--- a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
+++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ChatterTopbar" owl="1">
-        <div class="o_ChatterTopbar">
+        <div class="o_ChatterTopbar" t-ref="root">
             <t t-if="chatter">
                 <div class="o_ChatterTopbar_actions" t-att-class="{'o-has-active-button': chatter.composerView }">
                     <t t-if="chatter.threadView">
diff --git a/addons/mail/static/src/components/composer/composer.js b/addons/mail/static/src/components/composer/composer.js
index a11ead6b50f..1625cb0b9d1 100644
--- a/addons/mail/static/src/components/composer/composer.js
+++ b/addons/mail/static/src/components/composer/composer.js
@@ -70,7 +70,7 @@ export class Composer extends Component {
         if (emojisPopover && emojisPopover.contains(node)) {
             return true;
         }
-        return Boolean(this.el && this.el.contains(node));
+        return Boolean(this.root.el && this.root.el.contains(node));
     }
 
     /**
diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml
index a58e5eaced4..d316e6829c7 100644
--- a/addons/mail/static/src/components/composer/composer.xml
+++ b/addons/mail/static/src/components/composer/composer.xml
@@ -13,6 +13,7 @@
                 'o-messaging-in-editing': composerView and composerView.messageViewInEditing,
             }"
             t-on-keydown="_onKeydown"
+            t-ref="root"
         >
             <t t-if="composerView">
                 <t t-if="isDropZoneVisible.value">
diff --git a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml
index 205216685a8..04f55d3f045 100644
--- a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml
+++ b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.ComposerSuggestedRecipient" owl="1">
-        <div class="o_ComposerSuggestedRecipient" t-att-data-partner-id="suggestedRecipientInfo and suggestedRecipientInfo.partner and suggestedRecipientInfo.partner.id ? suggestedRecipientInfo.partner.id : false" t-att-title="ADD_AS_RECIPIENT_AND_FOLLOWER_REASON">
+        <div class="o_ComposerSuggestedRecipient" t-att-data-partner-id="suggestedRecipientInfo and suggestedRecipientInfo.partner and suggestedRecipientInfo.partner.id ? suggestedRecipientInfo.partner.id : false" t-att-title="ADD_AS_RECIPIENT_AND_FOLLOWER_REASON" t-ref="root">
             <t t-if="suggestedRecipientInfo">
                 <div class="custom-control custom-checkbox">
                     <input t-attf-id="{{ id }}_checkbox" class="custom-control-input" type="checkbox" t-att-checked="suggestedRecipientInfo.isSelected ? 'checked' : undefined" t-on-change="_onChangeCheckbox" t-ref="checkbox" />
diff --git a/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.xml b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.xml
index c78570dbe24..33ed1be3e11 100644
--- a/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.xml
+++ b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.ComposerSuggestedRecipientList" owl="1">
-        <div class="o_ComposerSuggestedRecipientList">
+        <div class="o_ComposerSuggestedRecipientList" t-ref="root">
             <t t-if="thread">
                 <t t-foreach="state.hasShowMoreButton ? thread.suggestedRecipientInfoList : thread.suggestedRecipientInfoList.slice(0,3)" t-as="recipientInfo" t-key="recipientInfo.localId">
                     <ComposerSuggestedRecipient
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js
index 3885a39cf97..e6c2e844394 100644
--- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js
@@ -85,7 +85,7 @@ export class ComposerSuggestion extends Component {
             this.composerView.hasToScrollToActiveSuggestion &&
             this.props.isActive
         ) {
-            this.el.scrollIntoView({
+            this.root.el.scrollIntoView({
                 block: 'center',
             });
             this.composerView.update({ hasToScrollToActiveSuggestion: false });
diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
index 9e446c627b1..8922bb47d7b 100644
--- a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
+++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ComposerSuggestion" owl="1">
-        <a class="o_ComposerSuggestion dropdown-item" t-att-class="{ 'active': props.isActive }" href="#" t-att-title="record and title()" role="menuitem" t-on-click="_onClick">
+        <a class="o_ComposerSuggestion dropdown-item" t-att-class="{ 'active': props.isActive }" href="#" t-att-title="record and title()" role="menuitem" t-on-click="_onClick" t-ref="root">
             <t t-if="record">
                 <t t-if="isCannedResponse">
                     <span class="o_ComposerSuggestion_part1 text-truncate"><t t-esc="record.source"/></span>
diff --git a/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml
index 6568d30939a..10cf83ebb56 100644
--- a/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml
+++ b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ComposerSuggestionList" owl="1">
-        <div class="o_ComposerSuggestionList" t-att-class="{ 'o-lowPosition': props.isBelow }">
+        <div class="o_ComposerSuggestionList" t-att-class="{ 'o-lowPosition': props.isBelow }" t-ref="root">
             <div class="o_ComposerSuggestionList_drop" t-att-class="{ 'dropdown': props.isBelow, 'dropup': !props.isBelow }">
                 <div class="o_ComposerSuggestionList_list dropdown-menu show">
                     <t t-foreach="composerView.mainSuggestedRecords" t-as="record" t-key="record.localId">
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 32c31f7a226..c8c074f1bda 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
@@ -138,7 +138,7 @@ export class ComposerTextInput extends Component {
         if (this.composerView.doFocus) {
             this.composerView.update({ doFocus: false });
             if (this.messaging.device.isMobile) {
-                this.el.scrollIntoView();
+                this.root.el.scrollIntoView();
             }
             this._textareaRef.el.focus();
         }
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 9ab6d427ca8..ad176a334fc 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
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ComposerTextInput" owl="1">
-        <div class="o_ComposerTextInput">
+        <div class="o_ComposerTextInput" t-ref="root">
             <t t-if="composerView">
                 <t t-if="composerView.hasSuggestions">
                     <ComposerSuggestionList
diff --git a/addons/mail/static/src/components/delete_message_confirm_dialog/delete_message_confirm_dialog.js b/addons/mail/static/src/components/delete_message_confirm_dialog/delete_message_confirm_dialog.js
index 5c57a25b518..7349d53bb79 100644
--- a/addons/mail/static/src/components/delete_message_confirm_dialog/delete_message_confirm_dialog.js
+++ b/addons/mail/static/src/components/delete_message_confirm_dialog/delete_message_confirm_dialog.js
@@ -15,7 +15,6 @@ export class DeleteMessageConfirmDialog extends Component {
     setup() {
         super.setup();
         this.title = this.env._t("Confirmation");
-        this.dialogRef = useRef('dialog');
     }
 
     /**
diff --git a/addons/mail/static/src/components/delete_message_confirm_dialog/delete_message_confirm_dialog.xml b/addons/mail/static/src/components/delete_message_confirm_dialog/delete_message_confirm_dialog.xml
index f0bc70d1fd4..fc5d145a16f 100644
--- a/addons/mail/static/src/components/delete_message_confirm_dialog/delete_message_confirm_dialog.xml
+++ b/addons/mail/static/src/components/delete_message_confirm_dialog/delete_message_confirm_dialog.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.DeleteMessageConfirmDialog" owl="1">
-        <Dialog contentClass="'o_DeleteMessageConfirmDialog'" title="title" t-on-dialog-closed="messageActionList and messageActionList.onDeleteConfirmDialogClosed" t-ref="dialog">
+        <Dialog contentClass="'o_DeleteMessageConfirmDialog'" title="title" t-on-dialog-closed="messageActionList and messageActionList.onDeleteConfirmDialogClosed" t-ref="root">
             <t t-if="messageActionList">
                 <p>Are you sure you want to delete this message?</p>
                 <blockquote class="o_DeleteMessageConfirmDialog_blockquote">
diff --git a/addons/mail/static/src/components/dialog/dialog.xml b/addons/mail/static/src/components/dialog/dialog.xml
index ae33bfcb019..294541e3d31 100644
--- a/addons/mail/static/src/components/dialog/dialog.xml
+++ b/addons/mail/static/src/components/dialog/dialog.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.Dialog" owl="1">
-        <div class="o_Dialog">
+        <div class="o_Dialog" t-ref="root">
             <t t-if="dialog">
                 <t
                     t-component="constructor.components[dialog.componentName]"
diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager.xml b/addons/mail/static/src/components/dialog_manager/dialog_manager.xml
index 3584c9a7d9c..b8477564a93 100644
--- a/addons/mail/static/src/components/dialog_manager/dialog_manager.xml
+++ b/addons/mail/static/src/components/dialog_manager/dialog_manager.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.DialogManager" owl="1">
-        <div class="o_DialogManager">
+        <div class="o_DialogManager" t-ref="root">
             <t t-if="messaging and messaging.dialogManager">
                 <t t-foreach="messaging.dialogManager.dialogs" t-as="dialog" t-key="dialog.localId">
                     <Dialog
diff --git a/addons/mail/static/src/components/discuss/discuss.xml b/addons/mail/static/src/components/discuss/discuss.xml
index 9a1d2ecc0c1..f1df0559fcd 100644
--- a/addons/mail/static/src/components/discuss/discuss.xml
+++ b/addons/mail/static/src/components/discuss/discuss.xml
@@ -7,6 +7,7 @@
                 'o-adding-item': discuss ? discuss.isAddingChannel or discuss.isAddingChat : false,
                 'o-mobile': messaging ? messaging.device.isMobile : false,
             }"
+            t-ref="root"
         >
             <t t-if="!discuss or !messaging.isInitialized">
                 <div class="o_Discuss_messagingNotInitialized"><i class="o_Discuss_messagingNotInitializedIcon fa fa-circle-o-notch fa-spin"/>Please wait...</div>
diff --git a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.xml b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.xml
index ad3afff2b8c..d5a39664cca 100644
--- a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.xml
+++ b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.DiscussMobileMailboxSelection" owl="1">
-        <div class="o_DiscussMobileMailboxSelection">
+        <div class="o_DiscussMobileMailboxSelection" t-ref="root">
             <t t-foreach="orderedMailboxes" t-as="mailbox" t-key="mailbox.localId">
                 <button class="o_DiscussMobileMailboxSelection_button btn btn-secondary"
                     t-att-class="{
diff --git a/addons/mail/static/src/components/discuss_public_view/discuss_public_view.xml b/addons/mail/static/src/components/discuss_public_view/discuss_public_view.xml
index b3f57ecfdc5..b9bdc20389e 100644
--- a/addons/mail/static/src/components/discuss_public_view/discuss_public_view.xml
+++ b/addons/mail/static/src/components/discuss_public_view/discuss_public_view.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.DiscussPublicView" owl="1">
-        <div class="o_DiscussPublicView d-flex flex-column h-100">
+        <div class="o_DiscussPublicView d-flex flex-column h-100" t-ref="root">
             <t t-if="discussPublicView">
                 <ThreadView t-if="discussPublicView.threadView"
                     hasComposerThreadTyping="true"
diff --git a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml
index 75508a54568..1ae3393d247 100644
--- a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml
+++ b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.DiscussSidebar" owl="1">
-        <div name="root" class="o_DiscussSidebar">
+        <div name="root" class="o_DiscussSidebar" t-ref="root">
             <div class="d-flex justify-content-center">
                 <button class="o_DiscussSidebar_startAMeetingButton btn btn-primary rounded" title="Start a meeting" t-on-click="discuss.onClickStartAMeetingButton" t-ref="startAMeetingButton">
                     Start a meeting
diff --git a/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml b/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml
index c567805c8ab..906cb26ebb6 100644
--- a/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_category/discuss_sidebar_category.xml
@@ -2,7 +2,7 @@
 
 <templates xml:space="preserve">
     <t t-name="mail.DiscussSidebarCategory" owl="1">
-        <div class="o_DiscussSidebarCategory" t-att-data-category-local-id="category.localId">
+        <div class="o_DiscussSidebarCategory" t-att-data-category-local-id="category.localId" t-ref="root">
             <div class="o_DiscussSidebarCategory_header">
                 <div class="o_DiscussSidebarCategory_title o_DiscussSidebarCategory_headerItem" t-on-click="category.onClick">
                     <i class="o_DiscussSidebarCategory_titleIcon" t-att-class="category.isOpen ? 'fa fa-chevron-down' : 'fa fa-chevron-right'"/>
diff --git a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
index 1be75eb4c72..5cf45bb1f4b 100644
--- a/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_category_item/discuss_sidebar_category_item.xml
@@ -6,6 +6,7 @@
                 'o-active': categoryItem and categoryItem.isActive,
                 'o-unread': categoryItem and categoryItem.isUnread,
             }" t-on-click="categoryItem and categoryItem.onClick" t-att-data-thread-local-id="categoryItem and categoryItem.channel.localId" t-att-data-thread-name="categoryItem and categoryItem.channel.displayName"
+            t-ref="root"
         >
             <t t-if="categoryItem">
                 <div class="o_DiscussSidebarCategoryItem_item o_DiscussSidebarCategoryItem_avatar">
diff --git a/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml b/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
index 58987fe1b0c..7a6b2a5923c 100644
--- a/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
+++ b/addons/mail/static/src/components/discuss_sidebar_mailbox/discuss_sidebar_mailbox.xml
@@ -6,6 +6,7 @@
                 'o-active': mailbox and mailbox === messaging.discuss.thread,
                 'o-starred-box': mailbox and mailbox === messaging.starred,
             }" t-on-click="mailbox.onClick" t-att-data-thread-local-id="mailbox.localId" t-att-data-thread-name="mailbox.displayName"
+            t-ref="root"
         >
             <ThreadIcon class="o_DiscussSidebarMailbox_item" threadLocalId="mailbox.localId"/>
             <div class="o_DiscussSidebarMailbox_item o_DiscussSidebarMailbox_name">
diff --git a/addons/mail/static/src/components/drop_zone/drop_zone.js b/addons/mail/static/src/components/drop_zone/drop_zone.js
index 94135e529ea..0fcc52117b9 100644
--- a/addons/mail/static/src/components/drop_zone/drop_zone.js
+++ b/addons/mail/static/src/components/drop_zone/drop_zone.js
@@ -36,7 +36,7 @@ export class DropZone extends Component {
      * @returns {boolean}
      */
     contains(node) {
-        return Boolean(this.el && this.el.contains(node));
+        return Boolean(this.root.el && this.root.el.contains(node));
     }
 
     //--------------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/drop_zone/drop_zone.xml b/addons/mail/static/src/components/drop_zone/drop_zone.xml
index b3db940fde9..d3428ea18d4 100644
--- a/addons/mail/static/src/components/drop_zone/drop_zone.xml
+++ b/addons/mail/static/src/components/drop_zone/drop_zone.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.DropZone" owl="1">
-        <div class="o_DropZone" t-att-class="{ 'o-dragging-inside': state.isDraggingInside }" t-on-dragenter="_onDragenter" t-on-dragleave="_onDragleave" t-on-dragover="_onDragover" t-on-drop="_onDrop">
+        <div class="o_DropZone" t-att-class="{ 'o-dragging-inside': state.isDraggingInside }" t-on-dragenter="_onDragenter" t-on-dragleave="_onDragleave" t-on-dragover="_onDragover" t-on-drop="_onDrop" t-ref="root">
             <h4>
                 Drag Files Here <i class="fa fa-download"/>
             </h4>
diff --git a/addons/mail/static/src/components/emojis_popover/emojis_popover.js b/addons/mail/static/src/components/emojis_popover/emojis_popover.js
index 79af38495aa..528545d6219 100644
--- a/addons/mail/static/src/components/emojis_popover/emojis_popover.js
+++ b/addons/mail/static/src/components/emojis_popover/emojis_popover.js
@@ -43,7 +43,7 @@ export class EmojisPopover extends Component {
      * @returns {boolean}
      */
     contains(node) {
-        return Boolean(this.el && this.el.contains(node));
+        return Boolean(this.root.el && this.root.el.contains(node));
     }
 
     //--------------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/emojis_popover/emojis_popover.xml b/addons/mail/static/src/components/emojis_popover/emojis_popover.xml
index cac840bbedc..d741b4ef00a 100644
--- a/addons/mail/static/src/components/emojis_popover/emojis_popover.xml
+++ b/addons/mail/static/src/components/emojis_popover/emojis_popover.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.EmojisPopover" owl="1">
-        <div class="o_EmojisPopover">
+        <div class="o_EmojisPopover" t-ref="root">
             <t t-foreach="emojis" t-as="emoji" t-key="emoji.unicode">
                 <span class="o_EmojisPopover_emoji" t-on-click="_onClickEmoji" t-att-title="emoji.description" t-att-data-source="emoji.sources[0]" t-att-data-unicode="emoji.unicode">
                     <t t-esc="emoji.unicode"/>
diff --git a/addons/mail/static/src/components/file_uploader/file_uploader.xml b/addons/mail/static/src/components/file_uploader/file_uploader.xml
index bf144037511..f935f295d49 100644
--- a/addons/mail/static/src/components/file_uploader/file_uploader.xml
+++ b/addons/mail/static/src/components/file_uploader/file_uploader.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.FileUploader" owl="1">
-        <div class="o_FileUploader">
+        <div class="o_FileUploader" t-ref="root">
             <input class="o_FileUploader_input" t-on-change="_onChangeAttachment" multiple="true" type="file" t-ref="fileInput" t-key="'fileInput'"/>
         </div>
     </t>
diff --git a/addons/mail/static/src/components/follow_button/follow_button.xml b/addons/mail/static/src/components/follow_button/follow_button.xml
index 00fc8d65310..5fc0156eac5 100644
--- a/addons/mail/static/src/components/follow_button/follow_button.xml
+++ b/addons/mail/static/src/components/follow_button/follow_button.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.FollowButton" owl="1">
-        <div class="o_FollowButton">
+        <div class="o_FollowButton" t-ref="root">
             <t t-if="thread.isCurrentPartnerFollowing">
                 <button class="o_FollowButton_unfollow btn btn-link" t-att-class="{ 'o-following': !state.isUnfollowButtonHighlighted, 'o-unfollow': state.isUnfollowButtonHighlighted }" t-att-disabled="props.isDisabled" t-on-click="_onClickUnfollow" t-on-mouseenter="_onMouseEnterUnfollow" t-on-mouseleave="_onMouseLeaveUnfollow">
                     <t t-if="state.isUnfollowButtonHighlighted">
diff --git a/addons/mail/static/src/components/follower/follower.xml b/addons/mail/static/src/components/follower/follower.xml
index 5a53ab7e7d2..a7b97dbaa50 100644
--- a/addons/mail/static/src/components/follower/follower.xml
+++ b/addons/mail/static/src/components/follower/follower.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.Follower" owl="1">
-        <div class="o_Follower">
+        <div class="o_Follower" t-ref="root">
             <t t-if="follower">
                 <a class="o_Follower_details d-flex" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails">
                     <img class="o_Follower_avatar" t-att-src="follower.partner.avatarUrl" alt="Avatar"/>
diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml
index 93b7cff95c6..2cffcd89ca1 100644
--- a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml
+++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.FollowerListMenu" owl="1">
-        <div class="o_FollowerListMenu" t-on-keydown="_onKeydown">
+        <div class="o_FollowerListMenu" t-on-keydown="_onKeydown" t-ref="root">
             <div class="o_FollowerListMenu_followers" t-ref="dropdown">
                 <button class="o_FollowerListMenu_buttonFollowers btn btn-link" t-att-disabled="props.isDisabled" t-on-click="_onClickFollowersButton" title="Show Followers">
                     <i class="fa fa-user"/>
diff --git a/addons/mail/static/src/components/follower_subtype/follower_subtype.xml b/addons/mail/static/src/components/follower_subtype/follower_subtype.xml
index b23800099d6..00489962d80 100644
--- a/addons/mail/static/src/components/follower_subtype/follower_subtype.xml
+++ b/addons/mail/static/src/components/follower_subtype/follower_subtype.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.FollowerSubtype" owl="1">
-        <div class="o_FollowerSubtype">
+        <div class="o_FollowerSubtype" t-ref="root">
             <label class="o_FollowerSubtype_label">
                 <input class="o_FollowerSubtype_checkbox" type="checkbox" t-att-checked="follower.selectedSubtypes.includes(followerSubtype) ? 'checked': ''" t-on-change="_onChangeCheckbox"/>
                 <t t-esc="followerSubtype.name"/>
diff --git a/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.xml b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.xml
index e0d545ebc51..9a5d0a830f8 100644
--- a/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.xml
+++ b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.FollowerSubtypeList" owl="1">
-        <div class="o_FollowerSubtypeList modal-dialog">
+        <div class="o_FollowerSubtypeList modal-dialog" t-ref="root">
             <t t-if="followerSubtypeList">
                 <div class="modal-content">
                     <header class="modal-header">
diff --git a/addons/mail/static/src/components/mail_template/mail_template.xml b/addons/mail/static/src/components/mail_template/mail_template.xml
index 48f7c050fcc..8b44c21eec8 100644
--- a/addons/mail/static/src/components/mail_template/mail_template.xml
+++ b/addons/mail/static/src/components/mail_template/mail_template.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MailTemplate" owl="1">
-        <div class="o_MailTemplate">
+        <div class="o_MailTemplate" t-ref="root">
             <t t-if="mailTemplate">
                 <i class="fa fa-envelope-o" title="Mail" role="img"/>
                 <span class="o_MailTemplate_name" t-esc="mailTemplate.name"/>
diff --git a/addons/mail/static/src/components/media_preview/media_preview.xml b/addons/mail/static/src/components/media_preview/media_preview.xml
index 1c0bfb0ef39..d402543a057 100644
--- a/addons/mail/static/src/components/media_preview/media_preview.xml
+++ b/addons/mail/static/src/components/media_preview/media_preview.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MediaPreview" owl="1">
-        <div class="o_MediaPreview position-relative d-flex justify-content-center">
+        <div class="o_MediaPreview position-relative d-flex justify-content-center" t-ref="root">
             <t t-if="mediaPreview">
                 <video class="o_MediaPreview_videoDisplay shadow rounded bg-dark" height="480" width="640" autoplay="" t-ref="video"/>
                 <p t-if="mediaPreview.doesBrowserSupportMediaDevices and !mediaPreview.isVideoEnabled" class="o_MediaPreview_mediaDevicesStatus position-absolute text-light">
diff --git a/addons/mail/static/src/components/message/message.js b/addons/mail/static/src/components/message/message.js
index f7c82cb7aaf..d3aa640af6c 100644
--- a/addons/mail/static/src/components/message/message.js
+++ b/addons/mail/static/src/components/message/message.js
@@ -151,14 +151,14 @@ export class Message extends Component {
      * @returns {boolean}
      */
     isBottomVisible({ offset = 0 } = {}) {
-        if (!this.el) {
+        if (!this.root.el) {
             return false;
         }
-        const elRect = this.el.getBoundingClientRect();
-        if (!this.el.parentNode) {
+        const elRect = this.root.el.getBoundingClientRect();
+        if (!this.root.el.parentNode) {
             return false;
         }
-        const parentRect = this.el.parentNode.getBoundingClientRect();
+        const parentRect = this.root.el.parentNode.getBoundingClientRect();
         // bottom with (double) 10px offset
         return (
             elRect.bottom < parentRect.bottom + offset &&
@@ -172,14 +172,14 @@ export class Message extends Component {
      * @returns {boolean}
      */
     isPartiallyVisible() {
-        if (!this.el) {
+        if (!this.root.el) {
             return false;
         }
-        const elRect = this.el.getBoundingClientRect();
-        if (!this.el.parentNode) {
+        const elRect = this.root.el.getBoundingClientRect();
+        if (!this.root.el.parentNode) {
             return false;
         }
-        const parentRect = this.el.parentNode.getBoundingClientRect();
+        const parentRect = this.root.el.parentNode.getBoundingClientRect();
         // intersection with 5px offset
         return (
             elRect.top < parentRect.bottom + 5 &&
@@ -223,7 +223,7 @@ export class Message extends Component {
      * @returns {Promise}
      */
     async scrollIntoView({ behavior = 'auto', block = 'end' } = {}) {
-        this.el.scrollIntoView({
+        this.root.el.scrollIntoView({
             behavior,
             block,
             inline: 'nearest',
diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml
index 898319398db..f0bfe326299 100644
--- a/addons/mail/static/src/components/message/message.xml
+++ b/addons/mail/static/src/components/message/message.xml
@@ -17,6 +17,7 @@
                 'o-starred': messageView and messageView.message.isStarred,
                 'mt-3': messageView and !messageView.isSquashed,
             }" t-on-click="_onClick" t-on-mouseenter="state.isHovered = true" t-on-mouseleave="state.isHovered = false" t-att-data-message-local-id="messageView and messageView.message.localId"
+            t-ref="root"
         >
             <t t-if="messageView" name="rootCondition">
                 <MessageInReplyToView t-if="messageView.messageInReplyToView" messageInReplyToViewLocalId="messageView.messageInReplyToView.localId"/>
diff --git a/addons/mail/static/src/components/message_action_list/message_action_list.xml b/addons/mail/static/src/components/message_action_list/message_action_list.xml
index 11795a8ad3f..138dff38191 100644
--- a/addons/mail/static/src/components/message_action_list/message_action_list.xml
+++ b/addons/mail/static/src/components/message_action_list/message_action_list.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates>
     <t t-name="mail.MessageActionList" owl="1">
-        <div class="o_MessageActionList d-flex" t-on-click="messageActionList and messageActionList.onClick">
+        <div class="o_MessageActionList d-flex" t-on-click="messageActionList and messageActionList.onClick" t-ref="root">
             <t t-if="messageActionList">
                 <Popover class="o_MessageActionList_action o_MessageActionList_actionReaction p-2 fa fa-lg fa-smile-o" position="'top'" titleAttribute="ADD_A_REACTION" t-on-o-emoji-selection="messageActionList.onEmojiSelection" t-on-o-popover-closed="messageActionList.onReactionPopoverClosed" t-on-o-popover-opened="messageActionList.onReactionPopoverOpened" t-ref="reactionPopover">
                     <t t-set="opened">
diff --git a/addons/mail/static/src/components/message_author_prefix/message_author_prefix.xml b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.xml
index d296a94638c..9d6182081f5 100644
--- a/addons/mail/static/src/components/message_author_prefix/message_author_prefix.xml
+++ b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MessageAuthorPrefix" owl="1">
-        <span class="o_MessageAuthorPrefix">
+        <span class="o_MessageAuthorPrefix" t-ref="root">
             <t t-if="message">
                 <t t-if="message.author and message.author === messaging.currentPartner">
                     <i class="o_MessageAuthorPrefixIcon fa fa-mail-reply"/>You:
diff --git a/addons/mail/static/src/components/message_in_reply_to_view/message_in_reply_to_view.xml b/addons/mail/static/src/components/message_in_reply_to_view/message_in_reply_to_view.xml
index 107f8154ed5..36dfff3fdef 100644
--- a/addons/mail/static/src/components/message_in_reply_to_view/message_in_reply_to_view.xml
+++ b/addons/mail/static/src/components/message_in_reply_to_view/message_in_reply_to_view.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
     <t t-name="mail.MessageInReplyToView" owl="1">
-        <small class="o_MessageInReplyToView text-small pt-1 pr-2 position-relative">
+        <small class="o_MessageInReplyToView text-small pt-1 pr-2 position-relative" t-ref="root">
             <t t-if="messageInReplyToView">
                 <t t-if="!messageInReplyToView.messageView.message.parentMessage.isEmpty">
                     <b class="o_MessageInReplyToView_author text-muted ml-2">@<t t-esc="messageInReplyToView.messageView.message.parentMessage.authorName"/></b>
diff --git a/addons/mail/static/src/components/message_list/message_list.js b/addons/mail/static/src/components/message_list/message_list.js
index cb31eb96c39..4cbd895d9a6 100644
--- a/addons/mail/static/src/components/message_list/message_list.js
+++ b/addons/mail/static/src/components/message_list/message_list.js
@@ -256,7 +256,7 @@ export class MessageList extends Component {
         if (this.props.getScrollableElement) {
             return this.props.getScrollableElement();
         } else {
-            return this.el;
+            return this.root.el;
         }
     }
 
diff --git a/addons/mail/static/src/components/message_list/message_list.xml b/addons/mail/static/src/components/message_list/message_list.xml
index dfbeb61f141..9c58d92b718 100644
--- a/addons/mail/static/src/components/message_list/message_list.xml
+++ b/addons/mail/static/src/components/message_list/message_list.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MessageList" owl="1">
-        <div class="o_MessageList" t-att-class="{ 'o-empty': threadView and threadView.messages.length === 0 }" t-on-scroll="onScroll">
+        <div class="o_MessageList" t-att-class="{ 'o-empty': threadView and threadView.messages.length === 0 }" t-on-scroll="onScroll" t-ref="root">
             <t t-if="threadView">
                 <!-- No result messages -->
                 <t t-if="threadView.threadCache.orderedNonEmptyMessages.length === 0">
diff --git a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
index dde158e6b4b..0dcf667f31a 100644
--- a/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
+++ b/addons/mail/static/src/components/message_reaction_group/message_reaction_group.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MessageReactionGroup" owl="1">
-        <div class="o_MessageReactionGroup d-flex" t-att-class="{'o-hasUserReacted': messageReactionGroup and messageReactionGroup.hasUserReacted}" t-att-title="messageReactionGroup and messageReactionGroup.summary" t-on-click="messageReactionGroup and messageReactionGroup.onClick">
+        <div class="o_MessageReactionGroup d-flex" t-att-class="{'o-hasUserReacted': messageReactionGroup and messageReactionGroup.hasUserReacted}" t-att-title="messageReactionGroup and messageReactionGroup.summary" t-on-click="messageReactionGroup and messageReactionGroup.onClick" t-ref="root">
             <t t-if="messageReactionGroup">
                 <span class="o_MessageReactionGroup_content mx-1">
                     <t t-esc="messageReactionGroup.content"/>
diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
index e905afaa392..6a7d03f6936 100644
--- a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
+++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MessageSeenIndicator" owl="1">
-        <span class="o_MessageSeenIndicator" t-att-class="{ 'o-all-seen': messageSeenIndicator and messageSeenIndicator.hasEveryoneSeen }" t-att-title="indicatorTitle">
+        <span class="o_MessageSeenIndicator" t-att-class="{ 'o-all-seen': messageSeenIndicator and messageSeenIndicator.hasEveryoneSeen }" t-att-title="indicatorTitle" t-ref="root">
             <t t-if="messageSeenIndicator and !messageSeenIndicator.isMessagePreviousToLastCurrentPartnerMessageSeenByEveryone">
                 <t t-if="messageSeenIndicator.hasSomeoneFetched or messageSeenIndicator.hasSomeoneSeen">
                     <i class="o_MessageSeenIndicator_icon o-first fa fa-check"/>
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.js b/addons/mail/static/src/components/messaging_menu/messaging_menu.js
index 0dd15397783..a671a1900a1 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.js
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.js
@@ -90,7 +90,7 @@ export class MessagingMenu extends Component {
             return;
         }
         // ignore click inside the menu
-        if (!this.el || this.el.contains(ev.target)) {
+        if (!this.root.el || this.root.el.contains(ev.target)) {
             return;
         }
         // in all other cases: close the messaging menu when clicking outside
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
index 66bafea4bad..ac5ddef5276 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MessagingMenu" owl="1">
-        <div class="o_MessagingMenu dropdown" t-att-class="{ 'show': messagingMenu ? messagingMenu.isOpen : false, 'o-mobile': messaging ? messaging.device.isMobile : false }">
+        <div class="o_MessagingMenu dropdown" t-att-class="{ 'show': messagingMenu ? messagingMenu.isOpen : false, 'o-mobile': messaging ? messaging.device.isMobile : false }" t-ref="root">
             <a class="o_MessagingMenu_toggler dropdown-toggle o-no-caret o-dropdown--narrow" t-att-class="{ 'o-no-notification': messagingMenu ? !messagingMenu.counter : false }" href="#" title="Conversations" role="button" t-att-aria-expanded="messagingMenu and messagingMenu.isOpen ? 'true' : 'false'" aria-haspopup="true" t-on-click="_onClickToggler">
                 <i class="o_MessagingMenu_icon fa fa-comments" role="img" aria-label="Messages"/>
                 <t t-if="!messagingMenu or !messaging.isInitialized">
diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
index d60611bf786..8cf7fd0ce47 100644
--- a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
+++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MobileMessagingNavbar" owl="1">
-        <div class="o_MobileMessagingNavbar">
+        <div class="o_MobileMessagingNavbar" t-ref="root">
             <t t-foreach="props.tabs" t-as="tab" t-key="tab.id">
                 <div class="o_MobileMessagingNavbar_tab" t-att-class="{ 'o-active': props.activeTabId === tab.id }" t-on-click="_onClick" t-att-data-tab-id="tab.id">
                     <t t-if="tab.icon">
diff --git a/addons/mail/static/src/components/notification_alert/notification_alert.xml b/addons/mail/static/src/components/notification_alert/notification_alert.xml
index 2c94e97a604..13e56bbcd52 100644
--- a/addons/mail/static/src/components/notification_alert/notification_alert.xml
+++ b/addons/mail/static/src/components/notification_alert/notification_alert.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.NotificationAlert" owl="1">
-        <div class="o_NotificationAlert">
+        <div class="o_NotificationAlert" t-ref="root">
             <t t-if="messaging">
                 <center t-if="isNotificationBlocked" class="o_notification_alert alert alert-primary">
                     Odoo Push notifications have been blocked. Go to your browser settings to allow them.
diff --git a/addons/mail/static/src/components/notification_group/notification_group.xml b/addons/mail/static/src/components/notification_group/notification_group.xml
index 51a7c92efac..f3d324f019a 100644
--- a/addons/mail/static/src/components/notification_group/notification_group.xml
+++ b/addons/mail/static/src/components/notification_group/notification_group.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.NotificationGroup" owl="1">
-        <div class="o_NotificationGroup" t-on-click="_onClick">
+        <div class="o_NotificationGroup" t-on-click="_onClick" t-ref="root">
             <t t-if="group">
                 <div class="o_NotificationGroup_sidebar">
                     <div class="o_NotificationGroup_imageContainer o_NotificationGroup_sidebarItem">
diff --git a/addons/mail/static/src/components/notification_list/notification_list.xml b/addons/mail/static/src/components/notification_list/notification_list.xml
index b66c5159c4e..2a7c2373b68 100644
--- a/addons/mail/static/src/components/notification_list/notification_list.xml
+++ b/addons/mail/static/src/components/notification_list/notification_list.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.NotificationList" owl="1">
-        <div class="o_NotificationList" t-att-class="{ 'o-empty': notifications.length === 0 }">
+        <div class="o_NotificationList" t-att-class="{ 'o-empty': notifications.length === 0 }" t-ref="root">
             <t t-if="notifications.length === 0">
                 <div class="o_NotificationList_noConversation">
                     No conversation yet...
diff --git a/addons/mail/static/src/components/notification_popover/notification_popover.xml b/addons/mail/static/src/components/notification_popover/notification_popover.xml
index cf5aa027672..ed58d7f7a76 100644
--- a/addons/mail/static/src/components/notification_popover/notification_popover.xml
+++ b/addons/mail/static/src/components/notification_popover/notification_popover.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.NotificationPopover" owl="1">
-        <div class="o_NotificationPopover">
+        <div class="o_NotificationPopover" t-ref="root">
             <t t-foreach="notifications" t-as="notification" t-key="notification.localId">
                 <div class="o_NotificationPopover_notification">
                     <i class="o_NotificationPopover_notificationIcon" t-att-class="iconClass" t-att-title="iconTitle" role="img"/>
diff --git a/addons/mail/static/src/components/notification_request/notification_request.xml b/addons/mail/static/src/components/notification_request/notification_request.xml
index 6849c2134d2..7ff15a700b4 100644
--- a/addons/mail/static/src/components/notification_request/notification_request.xml
+++ b/addons/mail/static/src/components/notification_request/notification_request.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.NotificationRequest" owl="1">
-        <div class="o_NotificationRequest" t-on-click="_onClick">
+        <div class="o_NotificationRequest" t-on-click="_onClick" t-ref="root">
             <t t-if="messaging">
                 <div class="o_NotificationRequest_sidebar">
                     <div class="o_NotificationRequest_imageContainer o_NotificationRequest_sidebarItem">
diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
index f575258fadf..effc5714446 100644
--- a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
+++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml
@@ -12,6 +12,7 @@
             }"
             t-on-click="_onClick"
             t-att-data-partner-local-id="partner ? partner.localId : undefined"
+            t-ref="root"
         >
             <t t-if="partner" name="rootCondition">
                 <t t-if="props.hasBackground">
diff --git a/addons/mail/static/src/components/popover_view/popover_view.xml b/addons/mail/static/src/components/popover_view/popover_view.xml
index 7be1648da80..7813a605cc8 100644
--- a/addons/mail/static/src/components/popover_view/popover_view.xml
+++ b/addons/mail/static/src/components/popover_view/popover_view.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.PopoverView" owl="1">
-        <div class="o_PopoverView">
+        <div class="o_PopoverView" t-ref="root">
             <t t-if="popoverView">
                 <ChannelInvitationForm class="o_PopoverView_channelInvitationForm" localId="popoverView.channelInvitationForm.localId"/>
             </t>
diff --git a/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml b/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml
index 81ea5e4a35c..f7ffb6943a5 100644
--- a/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml
+++ b/addons/mail/static/src/components/rtc_activity_notice/rtc_activity_notice.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.RtcActivityNotice" owl="1">
-        <div class="o_RtcActivityNotice dropdown">
+        <div class="o_RtcActivityNotice dropdown" t-ref="root">
             <t t-if="messaging">
                 <RtcInvitations/>
                 <t t-if="messaging.rtc.channel">
diff --git a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
index 67219c70554..57a62abb262 100644
--- a/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
+++ b/addons/mail/static/src/components/rtc_call_participant_card/rtc_call_participant_card.xml
@@ -9,6 +9,7 @@
                 'o-isInvitation': callParticipantCard and callParticipantCard.isInvitation,
             }"
             t-on-contextmenu="_onContextMenu"
+            t-ref="root"
         >
             <t t-if="callParticipantCard">
                 <div class="o_RtcCallParticipantCard_container align-items-center"
diff --git a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.js b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.js
index 2af6d936bf9..03858b4caec 100644
--- a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.js
+++ b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.js
@@ -98,7 +98,7 @@ export class RtcCallViewer extends Component {
         if (!this.rtcCallViewer) {
             return;
         }
-        if (!this.el) {
+        if (!this.root.el) {
             return;
         }
         if (!this.tileContainerRef.el) {
diff --git a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml
index c22dc856ae9..43927ec6e53 100644
--- a/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml
+++ b/addons/mail/static/src/components/rtc_call_viewer/rtc_call_viewer.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
 <t t-name="mail.RtcCallViewer" owl="1">
-    <div class="o_RtcCallViewer" t-att-class="{ 'o-fullScreen': rtcCallViewer and rtcCallViewer.isFullScreen, 'o-isMinimized': rtcCallViewer and rtcCallViewer.isMinimized }">
+    <div class="o_RtcCallViewer" t-att-class="{ 'o-fullScreen': rtcCallViewer and rtcCallViewer.isFullScreen, 'o-isMinimized': rtcCallViewer and rtcCallViewer.isMinimized }" t-ref="root">
         <t t-if="rtcCallViewer">
 
             <!-- Used to make the component depend on the window size and trigger an update when the window size changes. -->
diff --git a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
index 4cc42821fd5..a5a57c4c84e 100644
--- a/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
+++ b/addons/mail/static/src/components/rtc_configuration_menu/rtc_configuration_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.RtcConfigurationMenu" owl="1">
-        <div class="o_RtcConfigurationMenu">
+        <div class="o_RtcConfigurationMenu" t-ref="root">
             <div class="o_RtcConfigurationMenu_option">
                 <label class="o_RtcConfigurationMenu_optionLabel" title="Input device" aria-label="Input device">
                     <span class="o_RtcConfigurationMenu_optionName">Input device</span>
diff --git a/addons/mail/static/src/components/rtc_controller/rtc_controller.xml b/addons/mail/static/src/components/rtc_controller/rtc_controller.xml
index bcf4d087d7a..3556b5db2c4 100644
--- a/addons/mail/static/src/components/rtc_controller/rtc_controller.xml
+++ b/addons/mail/static/src/components/rtc_controller/rtc_controller.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.RtcController" owl="1">
-        <div class="o_RtcController">
+        <div class="o_RtcController" t-ref="root">
             <t t-if="rtcController and messaging">
                 <div class="o_RtcController_buttons">
                     <t t-if="rtcController.callViewer.threadView.thread.rtc and messaging.rtc.currentRtcSession">
diff --git a/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.xml b/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.xml
index c77324812e2..9a98344f9f8 100644
--- a/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.xml
+++ b/addons/mail/static/src/components/rtc_invitation_card/rtc_invitation_card.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.RtcInvitationCard" owl="1">
-        <div class="o_RtcInvitationCard">
+        <div class="o_RtcInvitationCard" t-ref="root">
             <t t-if="thread and thread.rtcInvitingSession">
                 <div class="o_RtcInvitationCard_partnerInfo">
                     <img class="o_RtcInvitationCard_partnerInfoImage rounded-circle"
diff --git a/addons/mail/static/src/components/rtc_invitations/rtc_invitations.xml b/addons/mail/static/src/components/rtc_invitations/rtc_invitations.xml
index f5bdbc10be7..2ab4b769958 100644
--- a/addons/mail/static/src/components/rtc_invitations/rtc_invitations.xml
+++ b/addons/mail/static/src/components/rtc_invitations/rtc_invitations.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.RtcInvitations" owl="1">
-        <div class="o_RtcInvitations">
+        <div class="o_RtcInvitations" t-ref="root">
             <t t-if="messaging.ringingThreads">
                 <t t-foreach="messaging.ringingThreads" t-as="thread" t-key="thread.localId">
                     <RtcInvitationCard threadLocalId="thread.localId"/>
diff --git a/addons/mail/static/src/components/rtc_layout_menu/rtc_layout_menu.xml b/addons/mail/static/src/components/rtc_layout_menu/rtc_layout_menu.xml
index 93fe554011a..5b006215e44 100644
--- a/addons/mail/static/src/components/rtc_layout_menu/rtc_layout_menu.xml
+++ b/addons/mail/static/src/components/rtc_layout_menu/rtc_layout_menu.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.RtcLayoutMenu" owl="1">
-        <div class="o_RtcLayoutMenu">
+        <div class="o_RtcLayoutMenu" t-ref="root">
             <t t-if="layoutMenu">
                 <t t-if="layoutMenu and layoutMenu.callViewer.threadView.thread.videoCount > 0">
                     <label class="o_RtcLayoutMenu_radio">
diff --git a/addons/mail/static/src/components/rtc_option_list/rtc_option_list.xml b/addons/mail/static/src/components/rtc_option_list/rtc_option_list.xml
index 35f29e449da..47e1be31515 100644
--- a/addons/mail/static/src/components/rtc_option_list/rtc_option_list.xml
+++ b/addons/mail/static/src/components/rtc_option_list/rtc_option_list.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.RtcOptionList" owl="1">
-        <div class="o_RtcOptionList">
+        <div class="o_RtcOptionList" t-ref="root">
             <t t-if="rtcOptionList">
                 <button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickLayout">
                     <i class="o_RtcOptionList_buttonIcon fa fa-lg fa-th-large"/>
diff --git a/addons/mail/static/src/components/rtc_video/rtc_video.js b/addons/mail/static/src/components/rtc_video/rtc_video.js
index 7527b6bc20f..3b53742bf50 100644
--- a/addons/mail/static/src/components/rtc_video/rtc_video.js
+++ b/addons/mail/static/src/components/rtc_video/rtc_video.js
@@ -14,7 +14,6 @@ export class RtcVideo extends Component {
     setup() {
         super.setup();
         useUpdate({ func: () => this._update() });
-        this._videoRef = useRef("video");
     }
 
     //--------------------------------------------------------------------------
@@ -45,15 +44,15 @@ export class RtcVideo extends Component {
      *
      */
     _loadVideo() {
-        if (!this._videoRef) {
+        if (!this.root) {
             return;
         }
         if (!this.rtcSession || !this.rtcSession.videoStream) {
-            this._videoRef.el.srcObject = undefined;
+            this.root.el.srcObject = undefined;
         } else {
-            this._videoRef.el.srcObject = this.rtcSession.videoStream;
+            this.root.el.srcObject = this.rtcSession.videoStream;
         }
-        this._videoRef.el.load();
+        this.root.el.load();
     }
 
     //--------------------------------------------------------------------------
diff --git a/addons/mail/static/src/components/rtc_video/rtc_video.xml b/addons/mail/static/src/components/rtc_video/rtc_video.xml
index 975a18be8b9..4e44b37d37e 100644
--- a/addons/mail/static/src/components/rtc_video/rtc_video.xml
+++ b/addons/mail/static/src/components/rtc_video/rtc_video.xml
@@ -3,11 +3,11 @@
 
     <t t-name="mail.RtcVideo" owl="1">
         <video class="o_RtcVideo"
-           t-ref="video"
            playsinline="true"
            autoplay="true"
            muted="true"
            t-on-loadedmetadata="_onVideoLoadedMetaData"
+           t-ref="root"
         />
     </t>
 
diff --git a/addons/mail/static/src/components/thread_icon/thread_icon.xml b/addons/mail/static/src/components/thread_icon/thread_icon.xml
index 41cbbb225ee..cbeaff944cb 100644
--- a/addons/mail/static/src/components/thread_icon/thread_icon.xml
+++ b/addons/mail/static/src/components/thread_icon/thread_icon.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ThreadIcon" owl="1">
-        <div class="o_ThreadIcon">
+        <div class="o_ThreadIcon" t-ref="root">
             <t t-if="thread" name="rootCondition">
                 <t t-if="thread.channel_type === 'channel'">
                     <t t-if="thread.public === 'private'">
diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
index 33dcc5ae780..8903f572e90 100644
--- a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
+++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml
@@ -6,7 +6,7 @@
             The preview template is used by the discuss in mobile, and by the systray
             menu in order to show preview of threads.
         -->
-        <div class="o_ThreadNeedactionPreview" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined">
+        <div class="o_ThreadNeedactionPreview" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined" t-ref="root">
             <t t-if="thread">
                 <div class="o_ThreadNeedactionPreview_sidebar">
                     <div class="o_ThreadNeedactionPreview_imageContainer o_ThreadNeedactionPreview_sidebarItem">
diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.xml b/addons/mail/static/src/components/thread_preview/thread_preview.xml
index 119ffb244bc..69a7a847928 100644
--- a/addons/mail/static/src/components/thread_preview/thread_preview.xml
+++ b/addons/mail/static/src/components/thread_preview/thread_preview.xml
@@ -6,7 +6,7 @@
             The preview template is used by the discuss in mobile, and by the systray
             menu in order to show preview of threads.
         -->
-        <div class="o_ThreadPreview" t-att-class="{ 'o-muted': thread and thread.localMessageUnreadCounter === 0 }" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined">
+        <div class="o_ThreadPreview" t-att-class="{ 'o-muted': thread and thread.localMessageUnreadCounter === 0 }" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined" t-ref="root">
             <t t-if="thread">
                 <div class="o_ThreadPreview_sidebar">
                     <div class="o_ThreadPreview_imageContainer o_ThreadPreview_sidebarItem">
diff --git a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
index d0e33e0f35d..5a605aed7ec 100644
--- a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
+++ b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ThreadTextualTypingStatus" owl="1">
-        <div class="o_ThreadTextualTypingStatus">
+        <div class="o_ThreadTextualTypingStatus" t-ref="root">
             <t t-if="thread and thread.orderedOtherTypingMembers.length > 0">
                 <ThreadTypingIcon animation="'pulse'" size="'medium'"/>
                 <span class="o_ThreadTextualTypingStatus_separator"/>
diff --git a/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.xml b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.xml
index 1bdb4adaf92..1c40e1d5e83 100644
--- a/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.xml
+++ b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ThreadTypingIcon" owl="1">
-        <div class="o_ThreadTypingIcon" t-att-title="props.title">
+        <div class="o_ThreadTypingIcon" t-att-title="props.title" t-ref="root">
             <span class="o_ThreadTypingIcon_dot o_ThreadTypingIcon_dot1" t-att-class="{
                 'o-animationBounce': props.animation === 'bounce',
                 'o-animationPulse': props.animation === 'pulse',
diff --git a/addons/mail/static/src/components/thread_view/thread_view.xml b/addons/mail/static/src/components/thread_view/thread_view.xml
index 3e822c6f578..779236c5ddb 100644
--- a/addons/mail/static/src/components/thread_view/thread_view.xml
+++ b/addons/mail/static/src/components/thread_view/thread_view.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ThreadView" owl="1">
-        <div class="o_ThreadView" t-att-class="threadView and threadView.extraClass" t-att-data-correspondent-id="threadView and threadView.thread and threadView.thread.correspondent and threadView.thread.correspondent.id" t-att-data-thread-local-id="threadView and threadView.thread and threadView.thread.localId">
+        <div class="o_ThreadView" t-att-class="threadView and threadView.extraClass" t-att-data-correspondent-id="threadView and threadView.thread and threadView.thread.correspondent and threadView.thread.correspondent.id" t-att-data-thread-local-id="threadView and threadView.thread and threadView.thread.localId" t-ref="root">
             <t t-if="threadView">
                 <t t-if="threadView.topbar">
                     <ThreadViewTopbar class="border-bottom" localId="threadView.topbar.localId"/>
diff --git a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
index e9340002b50..9b02ee14485 100644
--- a/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
+++ b/addons/mail/static/src/components/thread_view_topbar/thread_view_topbar.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.ThreadViewTopbar" owl="1">
-        <div class="o_ThreadViewTopbar d-flex flex-shrink-0 w-100 px-3">
+        <div class="o_ThreadViewTopbar d-flex flex-shrink-0 w-100 px-3" t-ref="root">
             <t t-if="threadViewTopbar">
                 <t t-if="threadViewTopbar.thread">
                     <ThreadIcon class="o_ThreadViewTopbar_threadIcon mr-2 align-self-center" threadLocalId="threadViewTopbar.thread.localId"/>
diff --git a/addons/mail/static/src/components/welcome_view/welcome_view.xml b/addons/mail/static/src/components/welcome_view/welcome_view.xml
index 4c6fbb4a06b..ddb07757b2b 100644
--- a/addons/mail/static/src/components/welcome_view/welcome_view.xml
+++ b/addons/mail/static/src/components/welcome_view/welcome_view.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.WelcomeView" owl="1">
-        <div class="o_WelcomeView h-100 d-flex flex-column justify-content-center align-items-center bg-light">
+        <div class="o_WelcomeView h-100 d-flex flex-column justify-content-center align-items-center bg-light" t-ref="root">
             <t t-if="welcomeView">
                 <h1 class="font-weight-light">
                     <span t-if="welcomeView.mediaPreview">You've been invited to a meeting!</span>
diff --git a/addons/mail/static/src/models/popover_view/popover_view.js b/addons/mail/static/src/models/popover_view/popover_view.js
index b4268e9157a..e57414dab26 100644
--- a/addons/mail/static/src/models/popover_view/popover_view.js
+++ b/addons/mail/static/src/models/popover_view/popover_view.js
@@ -44,13 +44,13 @@ registerModel({
          * @param {MouseEvent} ev
          */
         _onClickCaptureGlobal(ev) {
-            if (!this.component || !this.component.el) {
+            if (!this.component || !this.component.root.el) {
                 return;
             }
             if (this.anchorRef && this.anchorRef.el && this.anchorRef.el.contains(ev.target)) {
                 return;
             }
-            if (this.component.el.contains(ev.target)) {
+            if (this.component.root.el.contains(ev.target)) {
                 return;
             }
             this.delete();
diff --git a/addons/mail/static/src/utils/messaging_component.js b/addons/mail/static/src/utils/messaging_component.js
index 0dc81cacd14..d0e48f55425 100644
--- a/addons/mail/static/src/utils/messaging_component.js
+++ b/addons/mail/static/src/utils/messaging_component.js
@@ -3,6 +3,8 @@
 import { useModels } from "@mail/component_hooks/use_models/use_models";
 import { useShouldUpdateBasedOnProps } from "@mail/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props";
 
+const { useRef } = owl.hooks;
+
 const componentRegistry = {};
 
 /**
@@ -27,6 +29,7 @@ export function registerMessagingComponent(ComponentClass, { propsCompareDepth =
     // has "decoratedName" as its class name in stack traces and stuff.
     const MessagingClass = { [decoratedName]: class extends ComponentClass {
         setup(...args) {
+            this.root = useRef('root');
             super.setup(...args);
             // useModels must be defined after useRenderedValues, indeed records and
             // fields accessed during useRenderedValues should be observed by
diff --git a/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.js b/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.js
index 9d0c7a8371f..d6b695b7633 100644
--- a/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.js
+++ b/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.js
@@ -9,15 +9,6 @@ const { useRef } = owl.hooks;
 
 class SnailmailErrorDialog extends Component {
 
-    /**
-     * @override
-     */
-    setup() {
-        super.setup();
-        // to manually trigger the dialog close event
-        this._dialogRef = useRef('dialog');
-    }
-
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
@@ -62,7 +53,7 @@ class SnailmailErrorDialog extends Component {
      * @private
      */
     _onClickCancelLetter() {
-        this._dialogRef.comp._close();
+        this.root.comp._close();
         this.message.cancelLetter();
     }
 
@@ -70,14 +61,14 @@ class SnailmailErrorDialog extends Component {
      * @private
      */
     _onClickClose() {
-        this._dialogRef.comp._close();
+        this.root.comp._close();
     }
 
     /**
      * @private
      */
     _onClickResendLetter() {
-        this._dialogRef.comp._close();
+        this.root.comp._close();
         this.message.resendLetter();
     }
 
diff --git a/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.xml b/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.xml
index 389179d711d..af82d87e4f5 100644
--- a/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.xml
+++ b/addons/snailmail/static/src/components/snailmail_error_dialog/snailmail_error_dialog.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="snailmail.SnailmailErrorDialog" owl="1">
-        <Dialog contentClass="'o_SnailmailErrorDialog'" title="title" size="'medium'" t-ref="dialog">
+        <Dialog contentClass="'o_SnailmailErrorDialog'" title="title" size="'medium'" t-ref="root">
             <t t-if="message and notification">
                 <t t-if="notification.failure_type === 'sn_credit'">
                     <p class="o_SnailmailErrorDialog_contentCredit">
diff --git a/addons/snailmail/static/src/components/snailmail_notification_popover/snailmail_notification_popover.xml b/addons/snailmail/static/src/components/snailmail_notification_popover/snailmail_notification_popover.xml
index 873b08f4d37..726cf5f75b8 100644
--- a/addons/snailmail/static/src/components/snailmail_notification_popover/snailmail_notification_popover.xml
+++ b/addons/snailmail/static/src/components/snailmail_notification_popover/snailmail_notification_popover.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="snailmail.SnailmailNotificationPopover" owl="1">
-        <div class="o_SnailmailNotificationPopover">
+        <div class="o_SnailmailNotificationPopover" t-ref="root">
             <t t-if="message and notification">
                 <i class="o_SnailmailNotificationPopover_icon" t-att-class="iconClass" role="img"/>
                 <span t-esc="iconTitle"/>
diff --git a/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.xml b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.xml
index 0b3d78e8648..fa0f8e7302a 100644
--- a/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.xml
+++ b/addons/website_livechat/static/src/components/visitor_banner/visitor_banner.xml
@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="website_livechat.VisitorBanner" owl="1">
-        <div class="o_VisitorBanner">
+        <div class="o_VisitorBanner" t-ref="root">
             <div class="o_VisitorBanner_sidebar">
                 <div class="o_VisitorBanner_avatarContainer">
                     <img class="o_VisitorBanner_avatar rounded-circle" t-att-src="visitor.avatarUrl" alt="Avatar"/>