[IMP] web: Dialog: add option to stop click propagation

There are situations where we don't want clicks to be detected behind an opened
dialog: for example, when a dialog is opened by a dropdown, we may want to keep the
dropdown open while we interact with the dialog.

There is now an option (default: true) to stop clicks propagation when
they arrive at the dialog container.

2 files changed, 22 insertions, 8 deletions

diff --git a/addons/web/static/src/js/core/owl_dialog.js b/addons/web/static/src/js/core/owl_dialog.js
index 41b0dbf4562..d376e042ae4 100644
--- a/addons/web/static/src/js/core/owl_dialog.js
+++ b/addons/web/static/src/js/core/owl_dialog.js
@@ -31,6 +31,8 @@ odoo.define('web.OwlDialog', function () {
          *      should be rendered.
          * @param {string} [props.size='large'] 'extra-large', 'large', 'medium'
          *      or 'small'.
+         * @param {string} [props.stopClicks=true] whether the dialog should stop
+         *      the clicks propagation outside of itself.
          * @param {string} [props.subtitle='']
          * @param {string} [props.title='Odoo']
          * @param {boolean} [props.technical=true] If set to false, the modal will have
@@ -71,7 +73,7 @@ odoo.define('web.OwlDialog', function () {
             this._removeTooltips();
         }
 
-        async willUnmount() {
+        willUnmount() {
             this.env.bus.off('close_dialogs', this, this._close);
 
             this._removeTooltips();
@@ -131,6 +133,16 @@ odoo.define('web.OwlDialog', function () {
 
         /**
          * @private
+         * @param {MouseEvent} ev
+         */
+        _onClick(ev) {
+            if (this.props.stopClicks) {
+                ev.stopPropagation();
+            }
+        }
+
+        /**
+         * @private
          */
         _onFocus() {
             if (this.mainButton) {
@@ -235,19 +247,21 @@ odoo.define('web.OwlDialog', function () {
         renderFooter: true,
         renderHeader: true,
         size: 'large',
+        stopClicks: true,
         technical: true,
         title: "Odoo",
     };
     Dialog.props = {
-        backdrop: { validate: b => ['static', true, false].includes(b), optional: 1 },
+        backdrop: { validate: b => ['static', true, false].includes(b) },
         contentClass: { type: String, optional: 1 },
         fullscreen: { type: Boolean, optional: 1 },
-        renderFooter: { type: Boolean, optional: 1 },
-        renderHeader: { type: Boolean, optional: 1 },
-        size: { validate: s => ['extra-large', 'large', 'medium', 'small'].includes(s), optional: 1 },
+        renderFooter: Boolean,
+        renderHeader: Boolean,
+        size: { validate: s => ['extra-large', 'large', 'medium', 'small'].includes(s) },
+        stopClicks: Boolean,
         subtitle: { type: String, optional: 1 },
-        technical: { type: Boolean, optional: 1 },
-        title: { type: String, optional: 1 },
+        technical: Boolean,
+        title: String,
     };
     Dialog.template = 'OwlDialog';
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 363097c6d89..07919bcfa84 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -28,7 +28,7 @@
 
 <t t-name="OwlDialog" owl="1">
     <Portal target="'body'">
-        <div class="o_dialog" t-on-focus="_onFocus">
+        <div class="o_dialog" t-on-focus="_onFocus" t-on-click="_onClick">
             <div t-if="props.backdrop" class="modal-backdrop show" t-on-click="_onBackdropClick"/>
             <div role="dialog" class="modal"
                 tabindex="-1"