From 90c4acfa4406f6acd05d2f76a7f45b5fb48304c6 Mon Sep 17 00:00:00 2001
From: Romain Estievenart <res@odoo.com>
Date: Wed, 31 May 2023 10:58:32 +0000
Subject: [PATCH] [FIX] web: tooltip in kanban header doesn't dispose on items
 click

Before this commit, the kanban title's tooltip was set on the parent
element of the column's title. So the lifecycle (display/hide) of the
tooltip was not handled correctly when we clicked on the "quick create"
button or the "gear dropdown".
This commit moves the tooltip on the title's element to avoid that.

Steps to reproduce:

1. Open the "Event" app
2. Mouseenter the first kanban header
3. A wild tooltip appears (Gotta Catch 'Em All)
4. Click on the quick create button or the gear dropdown.
   => the tooltip isn't disposed => bug

Task ID: 3336233

closes odoo/odoo#125080

X-original-commit: 03a7bed1b0df29fb75d868fcc9c46e90e18aa58e
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
Signed-off-by: Romain Estievenart (res) <res@odoo.com>
---
 .../static/src/views/kanban/kanban_header.xml |  6 +-
 .../tests/views/kanban/kanban_view_tests.js   | 57 ++++++++++++++++---
 2 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/addons/web/static/src/views/kanban/kanban_header.xml b/addons/web/static/src/views/kanban/kanban_header.xml
index 9ee9a45bd9c..19ba9d45631 100644
--- a/addons/web/static/src/views/kanban/kanban_header.xml
+++ b/addons/web/static/src/views/kanban/kanban_header.xml
@@ -3,14 +3,16 @@
 
     <t t-name="web.KanbanHeader" owl="1">
         <div class="o_kanban_header position-sticky top-0 z-index-1" t-ref="root" t-attf-class="{{ !env.isSmall and group.isFolded ? 'pt-2' : 'py-3' }}">
-            <div class="o_kanban_header_title position-relative d-flex lh-lg" t-on-mouseenter="onTitleMouseEnter" t-on-mouseleave="onTitleMouseLeave">
-                <div t-if="group.isFolded" class="o_column_title d-flex align-items-center pt-1 fs-4 lh-1 text-nowrap opacity-50 opacity-100-hover flex-grow-1">
+            <div class="o_kanban_header_title position-relative d-flex lh-lg">
+                <div t-if="group.isFolded" class="o_column_title d-flex align-items-center pt-1 fs-4 lh-1 text-nowrap opacity-50 opacity-100-hover flex-grow-1"
+                     t-on-mouseenter="onTitleMouseEnter" t-on-mouseleave="onTitleMouseLeave">
                     <t t-esc="groupName"></t>
                     <span class="badge text-bg-500 rounded-pill lh-1 ms-2" t-esc="group.count"></span>
                 </div>
                 <span t-if="!group.isFolded"
                     t-esc="groupName"
                     class="o_column_title flex-grow-1 d-inline-block mw-100 text-truncate fs-4 fw-bold align-top text-900"
+                      t-on-mouseenter="onTitleMouseEnter" t-on-mouseleave="onTitleMouseLeave"
                     />
                 <t t-if="env.isSmall or !group.isFolded">
                     <Dropdown class="'o_kanban_config'" togglerClass="'btn px-2'" position="'bottom-end'" container="() => this._configDropdownContainer">
diff --git a/addons/web/static/tests/views/kanban/kanban_view_tests.js b/addons/web/static/tests/views/kanban/kanban_view_tests.js
index 52bc019f00e..b5ac4b2ec32 100644
--- a/addons/web/static/tests/views/kanban/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban/kanban_view_tests.js
@@ -398,6 +398,49 @@ QUnit.module("Views", (hooks) => {
         );
     });
 
+    QUnit.test("Hide tooltip when user click inside a kanban headers item", async (assert) => {
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+        });
+        serviceRegistry.add("tooltip", tooltipService);
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban default_group_by="product_id">
+                    <field name="product_id" options='{"group_by_tooltip": {"name": "Name"}}'/>
+                    <templates>
+                        <t t-name="kanban-box"/>
+                    </templates>
+                </kanban>`,
+        });
+        assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
+        assert.containsN(target, ".o_column_title", 2);
+
+        await mouseEnter(
+            target,
+            ".o_kanban_group:first-child .o_kanban_header_title .o_column_title"
+        );
+        assert.containsOnce(target, ".o-tooltip");
+
+        await click(
+            target,
+            ".o_kanban_group:first-child .o_kanban_header_title .o_kanban_quick_add"
+        );
+        assert.containsNone(target, ".o-tooltip");
+
+        await mouseEnter(
+            target,
+            ".o_kanban_group:first-child .o_kanban_header_title .o_column_title"
+        );
+        assert.containsOnce(target, ".o-tooltip");
+
+        await click(target, ".o_kanban_group:first-child .o_kanban_header_title .fa-gear");
+        await nextTick();
+        assert.containsNone(target, ".o-tooltip");
+    });
+
     QUnit.test("generic tags are case insensitive", async function (assert) {
         await makeView({
             type: "kanban",
@@ -8722,7 +8765,7 @@ QUnit.module("Views", (hooks) => {
             "first column should have a default title for when no value is provided"
         );
 
-        const groupsTitle = [...target.querySelectorAll(".o_kanban_group .o_kanban_header_title")];
+        const groupsTitle = [...target.querySelectorAll(".o_kanban_group .o_kanban_header_title .o_column_title")];
         await mouseEnter(groupsTitle[0]);
         assert.containsNone(
             target,
@@ -8779,17 +8822,17 @@ QUnit.module("Views", (hooks) => {
         assert.hasClass(target.querySelector(".o_kanban_renderer"), "o_kanban_grouped");
         assert.containsN(target, ".o_column_title", 2);
 
-        await mouseEnter(target.querySelectorAll(".o_kanban_group .o_kanban_header_title")[0]);
+        await mouseEnter(target.querySelectorAll(".o_kanban_group .o_kanban_header_title .o_column_title")[0]);
         assert.containsNone(target, ".o-tooltip");
 
         await triggerEvent(
-            target.querySelectorAll(".o_kanban_group .o_kanban_header_title")[0],
+            target.querySelectorAll(".o_kanban_group .o_kanban_header_title .o_column_title")[0],
             null,
             "mouseleave"
         );
         assert.containsNone(target, ".o-tooltip");
 
-        await mouseEnter(target.querySelectorAll(".o_kanban_group .o_kanban_header_title")[0]);
+        await mouseEnter(target.querySelectorAll(".o_kanban_group .o_kanban_header_title .o_column_title")[0]);
         assert.containsNone(target, ".o-tooltip");
 
         prom.resolve();
@@ -8825,19 +8868,19 @@ QUnit.module("Views", (hooks) => {
             },
         });
 
-        await mouseEnter(target.querySelectorAll(".o_kanban_group .o_kanban_header_title")[0]);
+        await mouseEnter(target.querySelectorAll(".o_kanban_group .o_kanban_header_title .o_column_title")[0]);
         assert.containsOnce(target, ".o-tooltip");
         assert.strictEqual(target.querySelector(".o-tooltip").textContent.trim(), "Namehello");
         assert.verifySteps(["read: product"]);
 
         await triggerEvent(
-            target.querySelectorAll(".o_kanban_group .o_kanban_header_title")[0],
+            target.querySelectorAll(".o_kanban_group .o_kanban_header_title .o_column_title")[0],
             null,
             "mouseleave"
         );
         assert.containsNone(target, ".o-tooltip", "tooltip should be closed");
 
-        await mouseEnter(target.querySelectorAll(".o_kanban_group .o_kanban_header_title")[0]);
+        await mouseEnter(target.querySelectorAll(".o_kanban_group .o_kanban_header_title .o_column_title")[0]);
         assert.containsOnce(target, ".o-tooltip");
         assert.strictEqual(target.querySelector(".o-tooltip").textContent.trim(), "Namehello");
         assert.verifySteps([]);