[IMP] mail, *: use component ref instead of component el

*: 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>

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">

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" />

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">

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"/>

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="{

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 });
     }
 

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>

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="{

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">

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) {

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">

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();
     }
 
     //--------------------------------------------------------------------------

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>

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">

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"/>

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';
     }
 
     /**

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

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">

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();

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">

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">

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

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>

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">

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));
     }
 
     /**

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">

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" />

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

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 });

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>

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">

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();
         }

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

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');
     }
 
     /**

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">

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]"

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

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>

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="{

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"

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

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'"/>

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">

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">

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));
     }
 
     //--------------------------------------------------------------------------

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>

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));
     }
 
     //--------------------------------------------------------------------------

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"/>

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>

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">

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"/>

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"/>

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"/>

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">

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"/>

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">

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',

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"/>

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">

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:

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>

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;
         }
     }
 

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">

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"/>

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"/>

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

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">

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">

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.

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">

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...

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"/>

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">

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">

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>

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">

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"

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) {

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. -->

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>

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">

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"

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"/>

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">

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"/>

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();
     }
 
     //--------------------------------------------------------------------------

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>
 

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'">

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">

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">

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"/>

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',

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"/>

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"/>

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>

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();

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

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();
     }
 

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">

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"/>