diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js
index e19ae239544..5fb38945e37 100644
--- a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js
+++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js
@@ -1,8 +1,9 @@
 /** @odoo-module **/
 
+import { useRefToModel } from '@mail/component_hooks/use_ref_to_model';
 import { registerMessagingComponent } from '@mail/utils/messaging_component';
 
-const { Component, onMounted, onWillUnmount, useRef } = owl;
+const { Component } = owl;
 
 export class FollowerListMenu extends Component {
 
@@ -11,18 +12,7 @@ export class FollowerListMenu extends Component {
      */
     setup() {
         super.setup();
-        this._dropdownRef = useRef('dropdown');
-        this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this);
-        onMounted(() => this._mounted());
-        onWillUnmount(() => this._willUnmount());
-    }
-
-    _mounted() {
-        document.addEventListener('click', this._onClickCaptureGlobal, true);
-    }
-
-    _willUnmount() {
-        document.removeEventListener('click', this._onClickCaptureGlobal, true);
+        useRefToModel({ fieldName: 'dropdownRef', refName: 'dropdown' });
     }
 
     //--------------------------------------------------------------------------
@@ -36,36 +26,6 @@ export class FollowerListMenu extends Component {
         return this.props.record;
     }
 
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onClickAddFollowers(ev) {
-        ev.preventDefault();
-        this.followerListMenuView.hide();
-        this.followerListMenuView.chatterOwner.promptAddPartnerFollower();
-    }
-
-    /**
-     * Close the dropdown when clicking outside of it.
-     *
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onClickCaptureGlobal(ev) {
-        if (!this.followerListMenuView.exists()) {
-            return;
-        }
-        // since dropdown is conditionally shown based on state, dropdownRef can be null
-        if (this._dropdownRef.el && !this._dropdownRef.el.contains(ev.target)) {
-            this.followerListMenuView.hide();
-        }
-    }
-
 }
 
 Object.assign(FollowerListMenu, {
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 743b79b9dbd..0084a37a085 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
@@ -13,7 +13,7 @@
                     <t t-if="followerListMenuView.isDropdownOpen">
                         <div class="o_FollowerListMenu_dropdown o-dropdown-menu dropdown-menu-end flex-column d-flex" role="menu">
                             <t t-if="followerListMenuView.chatterOwner.thread.model !== 'channel' and followerListMenuView.chatterOwner.thread.hasWriteAccess">
-                                <a class="o_FollowerListMenu_addFollowersButton dropdown-item" href="#" role="menuitem" t-on-click="_onClickAddFollowers">
+                                <a class="o_FollowerListMenu_addFollowersButton dropdown-item" href="#" role="menuitem" t-on-click="followerListMenuView.onClickAddFollowers">
                                     Add Followers
                                 </a>
                                 <t t-if="followerListMenuView.followerViews.length > 0">
diff --git a/addons/mail/static/src/models/follower_list_menu_view.js b/addons/mail/static/src/models/follower_list_menu_view.js
index e9084384b4d..78fe25ed49d 100644
--- a/addons/mail/static/src/models/follower_list_menu_view.js
+++ b/addons/mail/static/src/models/follower_list_menu_view.js
@@ -5,10 +5,26 @@ import { attr, many, one } from '@mail/model/model_field';
 
 registerModel({
     name: 'FollowerListMenuView',
+    lifecycleHooks: {
+        _created() {
+            document.addEventListener('click', this._onClickCaptureGlobal, true);
+        },
+        _willDelete() {
+            document.removeEventListener('click', this._onClickCaptureGlobal, true);
+        },
+    },
     recordMethods: {
         hide() {
             this.update({ isDropdownOpen: false });
         },
+        /**
+         * @param {MouseEvent} ev
+         */
+        onClickAddFollowers(ev) {
+            ev.preventDefault();
+            this.hide();
+            this.chatterOwner.promptAddPartnerFollower();
+        },
         /**
          * @param {MouseEvent} ev
          */
@@ -27,12 +43,28 @@ registerModel({
                     break;
             }
         },
+        /**
+         * Close the dropdown when clicking outside of it.
+         *
+         * @private
+         * @param {MouseEvent} ev
+         */
+        _onClickCaptureGlobal(ev) {
+            if (!this.exists()) {
+                return;
+            }
+            // since dropdown is conditionally shown based on state, dropdownRef can be null
+            if (this.dropdownRef.el && !this.dropdownRef.el.contains(ev.target)) {
+                this.hide();
+            }
+        },
     },
     fields: {
         chatterOwner: one('Chatter', {
             identifying: true,
             inverse: 'followerListMenuView',
         }),
+        dropdownRef: attr(),
         followerViews: many('FollowerView', {
             compute() {
                 return this.chatterOwner.thread.followers.map(follower => ({ follower }));