[FIX] web: DropdownMenu autoclose behavior should match Bootstrap

Before this commit, with an opened DropdownMenu component, when the user
clicks on a Bootstrap's dropdown the DropdownMenu doesn't close.

This issue is due to a conflict between the global click listener
registered to close the DropdownMenu and the listener registered by the
Bootstrap dropdown:
the last one prevents the event from bubbling up to the `window` element
and be handled by the first one.

This commit fixes it by enabling the `capture` flag on the DropdownMenu
global click listener, giving it the opportunity to handling it properly
 and close the DropdownMenu.

Note: this commit also fixes an issue when a dialog is opened from a
DropdownMenu (like the favorite's delete action) and prevents it from
closing in the background (e.g. when the dialog is still opened).

opw-1879566

closes odoo/odoo#60909

X-original-commit: e4f87710e16357f24f388159a7b1e82eccda598a
Signed-off-by: Pierre Paridans <pparidans@users.noreply.github.com>

1 files changed, 8 insertions, 1 deletions

diff --git a/addons/web/static/src/js/components/dropdown_menu.js b/addons/web/static/src/js/components/dropdown_menu.js
index 64c30b6500e..37fe6374983 100644
--- a/addons/web/static/src/js/components/dropdown_menu.js
+++ b/addons/web/static/src/js/components/dropdown_menu.js
@@ -34,7 +34,7 @@ odoo.define('web.DropdownMenu', function (require) {
             this.dropdownMenu = useRef('dropdown');
             this.state = useState({ open: false });
 
-            useExternalListener(window, 'click', this._onWindowClick);
+            useExternalListener(window, 'click', this._onWindowClick, true);
             useExternalListener(window, 'keydown', this._onWindowKeydown);
         }
 
@@ -126,6 +126,13 @@ odoo.define('web.DropdownMenu', function (require) {
                 !this.el.contains(ev.target) &&
                 !this.el.contains(document.activeElement)
             ) {
+                if (document.body.classList.contains("modal-open")) {
+                    // retrieve the active modal and check if the dropdown is a child of this modal
+                    const modal = document.querySelector('.modal:not(.o_inactive_modal)');
+                    if (!modal.contains(this.el)) {
+                        return;
+                    }
+                }
                 this.state.open = false;
             }
         }