From 7c2fb9bb16aa5e30cd4e3f49d228e2610c09a5d1 Mon Sep 17 00:00:00 2001
From: Sunil Shrimali <shr@odoo.com>
Date: Tue, 16 Mar 2021 12:38:18 +0000
Subject: [PATCH] [IMP] web: set visible overflow on modal for inline domain
 editor

When we have (inline) domain widget within a modal, user can not see
all the fields because overflow is hidden on the modals by default.
This is not ideal behavior.

With this commit, when the inline domain editor is opened with field
widget within a modal, we allow field selector to overflow by
manually setting visible overflow on the parent modal. The changes
are inspired by 'DomainSelectorDialog'.

Task ID-2480625
COM odoo/odoo#68586
---
 .../web/static/src/js/fields/basic_fields.js  | 10 +++++++
 .../static/src/js/widgets/domain_selector.js  | 10 +++++++
 .../tests/widgets/domain_selector_tests.js    | 29 +++++++++++++++++++
 3 files changed, 49 insertions(+)

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index af800d4f708..77d52fd61b5 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -3321,6 +3321,16 @@ var FieldDomain = AbstractField.extend({
 
         this._setState();
     },
+    /**
+     * We use the on_attach_callback hook here when widget is attached to the DOM, so that
+     * the inline 'DomainSelector' widget allows field selector to overflow if widget is
+     * attached within a modal.
+     */
+    on_attach_callback() {
+        if (this.domainSelector && !this.inDialog) {
+            this.domainSelector.on_attach_callback();
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Public
diff --git a/addons/web/static/src/js/widgets/domain_selector.js b/addons/web/static/src/js/widgets/domain_selector.js
index 9fe71ce163f..79c22126593 100644
--- a/addons/web/static/src/js/widgets/domain_selector.js
+++ b/addons/web/static/src/js/widgets/domain_selector.js
@@ -477,6 +477,16 @@ var DomainSelector = DomainTree.extend({
             }
         });
     },
+    /**
+     * If 'DomainSelector' is attached within modal, the modal should have
+     * visible overflow to allow user to see fields drop-down.
+     */
+    on_attach_callback() {
+        let $modalBodyEl = this.$el.closest('.modal-body');
+        if ($modalBodyEl.length !== 0) {
+            $modalBodyEl.css('overflow', 'visible');
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Public
diff --git a/addons/web/static/tests/widgets/domain_selector_tests.js b/addons/web/static/tests/widgets/domain_selector_tests.js
index a587117f95a..784a7c632f5 100644
--- a/addons/web/static/tests/widgets/domain_selector_tests.js
+++ b/addons/web/static/tests/widgets/domain_selector_tests.js
@@ -244,6 +244,35 @@ QUnit.module('DomainSelector', {
 
         domainSelector.destroy();
     });
+
+    QUnit.test("inline domain editor in modal", async function (assert) {
+        assert.expect(1);
+        const actions = [
+            {
+                id: 5,
+                name: "Partner Form",
+                res_model: "partner",
+                target: "new",
+                type: "ir.actions.act_window",
+                views: [["view_ref", "form"]],
+            },
+        ];
+        const actionManager = await testUtils.createActionManager({
+            actions,
+            archs: {
+                "partner,view_ref,form": `
+                    <form>
+                        <field name="foo" string="Domain" widget="domain" options="{'model': 'partner'}"/>
+                    </form>
+                `,
+            },
+            data: this.data,
+        });
+        await actionManager.doAction(5);
+        assert.strictEqual(document.querySelector('div[name="foo"]').closest('.modal-body').style.overflow,
+            'visible', "modal should have visible overflow if there is inline domain field widget");
+        actionManager.destroy();
+    });
 });
 });
 });