[FIX] web_tour: prevent kanban quick create closing when tooltip is clicked

Currently, when the user is using the quick create card of the kanban view, the
card will automatically close itself if the user clicks on a tooltip element
from a tour.

This can lead to bad user experience since the tour tip can be visually
*within* the quick create card, and the user will not understand why the card
is closing.

More importantly, the tooltip element "zone" is bigger that what it visually
looks like and you may click on an element (a field, ...) that seems to be
perfectly within the quick create card but is in fact part of the tooltip.

This commit fixes that behavior by preventing the click event propagation in
the tip widget handler.

The fix is made in version 14.0 because this is especially problematic for the
tour of the "CRM" app, that heavily uses the quick create card in combination
with tour tips.

Task 2388450

closes odoo/odoo#62154

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

2 files changed, 61 insertions, 1 deletions

diff --git a/addons/web_tour/static/src/js/tip.js b/addons/web_tour/static/src/js/tip.js
index fc6598a39e6..9165e8983d1 100644
--- a/addons/web_tour/static/src/js/tip.js
+++ b/addons/web_tour/static/src/js/tip.js
@@ -520,12 +520,18 @@ var Tip = Widget.extend({
     /**
      * On touch devices, closes the tip when clicked.
      *
+     * Also stop propagation to avoid undesired behavior, such as the kanban
+     * quick create closing when the user clicks on the tooltip.
+     *
      * @private
+     * @param {MouseEvent} ev
      */
-    _onTipClicked: function () {
+    _onTipClicked: function (ev) {
         if (config.device.touch && this.tip_opened) {
             this._to_bubble_mode();
         }
+
+        ev.stopPropagation();
     },
     /**
      * @private
diff --git a/addons/web_tour/static/tests/tour_manager_tests.js b/addons/web_tour/static/tests/tour_manager_tests.js
index c60aff12e14..aa2dff5fcf8 100644
--- a/addons/web_tour/static/tests/tour_manager_tests.js
+++ b/addons/web_tour/static/tests/tour_manager_tests.js
@@ -1,8 +1,10 @@
 odoo.define('web_tour.tour_manager_tests', async function (require) {
     "use strict";
 
+    const KanbanView = require('web.KanbanView');
     const TourManager = require('web_tour.TourManager');
     const testUtils = require('web.test_utils');
+    const createView = testUtils.createView;
 
     const ajax = require('web.ajax');
     const { qweb } = require('web.core');
@@ -147,5 +149,57 @@ odoo.define('web_tour.tour_manager_tests', async function (require) {
 
             tourManager.destroy();
         });
+
+        QUnit.test("kanban quick create VS tour tooltips", async function (assert) {
+            assert.expect(3);
+
+            const kanban = await createView({
+                View: KanbanView,
+                model: 'partner',
+                data: {
+                    partner: {
+                        fields: {
+                            foo: {string: "Foo", type: "char"},
+                            bar: {string: "Bar", type: "boolean"},
+                        },
+                        records: [
+                            {id: 1, bar: true, foo: "yop"},
+                        ]
+                    }
+                },
+                arch: `<kanban>
+                        <field name="bar"/>
+                        <templates><t t-name="kanban-box">
+                            <div><field name="foo"/></div>
+                        </t></templates>
+                        </kanban>`,
+                groupBy: ['bar'],
+            });
+
+            // click to add an element
+            await testUtils.dom.click(kanban.$('.o_kanban_header .o_kanban_quick_add i').first());
+            assert.containsOnce(kanban, '.o_kanban_quick_create',
+                "should have open the quick create widget");
+
+            // create tour manager targeting the kanban quick create in its steps
+            const tourManager = await createTourManager({
+                observe: true,
+                template: kanban.$el.html(),
+                tours: [{
+                    name: "Tour",
+                    options: { rainbowMan: false },
+                    steps: [{ trigger: "input[name='display_name']" }],
+                }],
+            });
+
+            assert.containsOnce(document.body, '.o_tooltip:visible');
+
+            await testUtils.dom.click($('.o_tooltip:visible'));
+            assert.containsOnce(kanban, '.o_kanban_quick_create',
+                "the quick create should not have been destroyed when tooltip is clicked");
+
+            kanban.destroy();
+            tourManager.destroy();
+        });
     });
 });