pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web: tooltip in kanban header doesn't dispose on items click

Browse Source 
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>
This commit is contained in:
Romain Estievenart
2023-06-15 02:38:09 +02:00
parent 7d66755ff9
commit 90c4acfa44
2 changed files with 54 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/views/kanban/kanban_header.xml
+4 -2
View File
@@ -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">
addons/web/static/tests/views/kanban/kanban_view_tests.js
+50 -7
View File
@@ -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([]);