[FIX] web: Auto close dropdown is broken

Steps to reproduce:
1. Go to Project App
2. Open and edit a task
3. Click on Customer => search more
5. Click on "Filters"
6. Click on "Group by"
=> The "Filters" and "Group by" dropdown are open at same time => bug

Since odoo/odoo@e4f87710e16357f24f388159a7b1e82eccda598a, we added a way
to prevent bs and owl dropdown to be open in the same time.

But when the web-editor is present, the CSS selector used to match the
opened modal ("search more" in this case) conflicts with the DOM created
by the web-editor  (modals identified by the classes: .web-editor,
.note-picture-dialog, .note-link-dialog, .note-help-dialog).

To avoid this conflict, this commit uses a more restrictive CSS selector
to match only the first (active) opened modal (as web-editor doesn't
attach its modals at the root of the body).

closes odoo/odoo#65274

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

2 files changed, 61 insertions, 2 deletions

diff --git a/addons/web/static/src/js/components/dropdown_menu.js b/addons/web/static/src/js/components/dropdown_menu.js
index 8c1676d8952..890d928b19f 100644
--- a/addons/web/static/src/js/components/dropdown_menu.js
+++ b/addons/web/static/src/js/components/dropdown_menu.js
@@ -128,8 +128,12 @@ odoo.define('web.DropdownMenu', function (require) {
             ) {
                 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)) {
+                    const modal = document.querySelector('body > .modal:not(.o_inactive_modal)');
+                    if (modal && !modal.contains(this.el)) {
+                        return;
+                    }
+                    const owlModal = document.querySelector('body > .o_dialog > .modal:not(.o_inactive_modal)');
+                    if (owlModal && !owlModal.contains(this.el)) {
                         return;
                     }
                 }
diff --git a/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js b/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js
index e94797ff5f6..e8db0df1047 100644
--- a/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js
+++ b/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js
@@ -2926,6 +2926,61 @@ QUnit.module('fields', {}, function () {
             form.destroy();
         });
 
+        QUnit.test('search more in many2one: dropdown click', async function (assert) {
+            assert.expect(8);
+
+            for (let i = 0; i < 8; i++) {
+                this.data.partner.records.push({id: 100 + i, display_name: 'test_' + i});
+            }
+
+            // simulate modal-like element rendered by the field html
+            const $fakeDialog = $(`<div>
+                <div class="pouet">
+                    <div class="modal"></div>
+                </div>
+            </div>`);
+            $('body').append($fakeDialog);
+
+            const form = await createView({
+                View: FormView,
+                model: 'partner',
+                data: this.data,
+                arch: '<form><field name="trululu"/></form>',
+                archs: {
+                    'partner,false,list': '<list><field name="display_name"/></list>',
+                    'partner,false,search': '<search></search>',
+                },
+            });
+            await testUtils.fields.many2one.searchAndClickItem('trululu', {
+                item: 'Search More',
+                search: 'test',
+            });
+
+            // dropdown selector
+            let filterMenuCss = '.o_search_options > .o_filter_menu';
+            let groupByMenuCss = '.o_search_options > .o_group_by_menu';
+
+            await testUtils.dom.click(document.querySelector(`${filterMenuCss} > .o_dropdown_toggler_btn`));
+
+            assert.hasClass(document.querySelector(filterMenuCss), 'show');
+            assert.isVisible(document.querySelector(`${filterMenuCss} > .dropdown-menu`),
+                "the filter dropdown menu should be visible");
+            assert.doesNotHaveClass(document.querySelector(groupByMenuCss), 'show');
+            assert.isNotVisible(document.querySelector(`${groupByMenuCss} > .dropdown-menu`),
+                "the Group by dropdown menu should be not visible");
+
+            await testUtils.dom.click(document.querySelector(`${groupByMenuCss} > .o_dropdown_toggler_btn`));
+            assert.hasClass(document.querySelector(groupByMenuCss), 'show');
+            assert.isVisible(document.querySelector(`${groupByMenuCss} > .dropdown-menu`),
+                "the group by dropdown menu should be visible");
+            assert.doesNotHaveClass(document.querySelector(filterMenuCss), 'show');
+            assert.isNotVisible(document.querySelector(`${filterMenuCss} > .dropdown-menu`),
+                "the filter dropdown menu should be not visible");
+
+            $fakeDialog.remove();
+            form.destroy();
+        });
+
         QUnit.test('updating a many2one from a many2many', async function (assert) {
             assert.expect(4);