[FIX] mail: restore close of other menus on click of messaging menu

task-2278830

closes odoo/odoo#53566

X-original-commit: 0407151b34da16ca54066bb15e578dc1db85f365
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
Signed-off-by: Sébastien Theys (seb) <seb@odoo.com>

4 files changed, 19 insertions, 15 deletions

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 864c7df97e1..b4647d698cc 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.js
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.js
@@ -113,6 +113,8 @@ class MessagingMenu extends Component {
     //--------------------------------------------------------------------------
 
     /**
+     * Closes the menu when clicking outside, if appropriate.
+     *
      * @private
      * @param {MouseEvent} ev
      */
@@ -126,7 +128,7 @@ class MessagingMenu extends Component {
         ) {
             return;
         }
-        // closes the menu when clicking outside
+        // ignore click inside the menu
         if (this.el.contains(ev.target)) {
             return;
         }
@@ -142,7 +144,6 @@ class MessagingMenu extends Component {
      * @param {MouseEvent} ev
      */
     _onClickDesktopTabButton(ev) {
-        ev.stopPropagation();
         this.messagingMenu.update({ activeTabId: ev.currentTarget.dataset.tabId });
     }
 
@@ -151,9 +152,8 @@ class MessagingMenu extends Component {
      * @param {MouseEvent} ev
      */
     _onClickNewMessage(ev) {
-        ev.stopPropagation();
         if (!this.env.messaging.device.isMobile) {
-            this.env.models['mail.thread'].openNewMessage();
+            this.env.messaging.chatWindowManager.openNewMessage();
             this.messagingMenu.close();
         } else {
             this.messagingMenu.toggleMobileNewMessage();
@@ -165,7 +165,7 @@ class MessagingMenu extends Component {
      * @param {MouseEvent} ev
      */
     _onClickToggler(ev) {
-        ev.stopPropagation();
+        // avoid following dummy href
         ev.preventDefault();
         this.messagingMenu.toggleOpen();
     }
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
index 54855c15c13..1aaea9db5fb 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss
@@ -99,7 +99,7 @@
 // ------------------------------------------------------------------
 
 // Make hightlight more consistent, due to messaging menu looking quite similar to discuss app in mobile
-.o_MessagingMenu.show {
+.o_MessagingMenu.o-is-open {
     background-color: rgba(black, 0.1);
 }
 
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 db1c211f858..0a6096ee984 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml
@@ -2,10 +2,10 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.MessagingMenu" owl="1">
-        <li class="o_MessagingMenu" t-att-class="{ show: messagingMenu.isOpen, 'o-mobile': env.messaging.device.isMobile }">
+        <li class="o_MessagingMenu" t-att-class="{ 'o-is-open': messagingMenu.isOpen, 'o-mobile': env.messaging.device.isMobile }">
             <!-- TODO FIXME restore mobile stuff here (activeMobileThread) -->
             <t t-if="!env.messaging.device.isMobile or true">
-                <a class="o_MessagingMenu_toggler o-no-caret" t-att-class="{ show: messagingMenu.isOpen, 'o-no-notification': !messagingMenu.counter }" href="#" t-on-click="_onClickToggler" data-toggle="dropdown" data-display="static" title="Conversations" role="button" aria-expanded="false">
+                <a class="o_MessagingMenu_toggler" t-att-class="{ 'o-no-notification': !messagingMenu.counter }" href="#" title="Conversations" role="button" t-att-aria-expanded="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="!env.messaging.isInitialized">
                         <i class="o_MessagingMenu_loading fa fa-spinner fa-spin"/>
diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu_tests.js b/addons/mail/static/src/components/messaging_menu/messaging_menu_tests.js
index e2ccaab78ba..4f070d7881c 100644
--- a/addons/mail/static/src/components/messaging_menu/messaging_menu_tests.js
+++ b/addons/mail/static/src/components/messaging_menu/messaging_menu_tests.js
@@ -140,13 +140,10 @@ QUnit.test('basic rendering', async function (assert) {
     );
 
     await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
-    assert.ok(
-        document.querySelector('.o_MessagingMenu').classList.contains('show'),
-        "should mark messaging menu item as shown"
-    );
-    assert.ok(
-        document.querySelector(`.o_MessagingMenu_toggler`).classList.contains('show'),
-        "should mark messaging menu clickable item as shown"
+    assert.hasClass(
+        document.querySelector('.o_MessagingMenu'),
+        "o-is-open",
+        "should mark messaging menu as opened"
     );
     assert.strictEqual(
         document.querySelectorAll(`.o_MessagingMenu_dropdownMenu`).length,
@@ -220,6 +217,13 @@ QUnit.test('basic rendering', async function (assert) {
         1,
         "should display no conversation in thread preview list"
     );
+
+    await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click());
+    assert.doesNotHaveClass(
+        document.querySelector('.o_MessagingMenu'),
+        "o-is-open",
+        "should mark messaging menu as closed"
+    );
 });
 
 QUnit.test('counter is taking into account failure notification', async function (assert) {