diff --git a/addons/web/static/src/views/kanban/kanban_compiler.js b/addons/web/static/src/views/kanban/kanban_compiler.js
index 94c70bb2ef9..b1c431da086 100644
--- a/addons/web/static/src/views/kanban/kanban_compiler.js
+++ b/addons/web/static/src/views/kanban/kanban_compiler.js
@@ -30,12 +30,21 @@ export class KanbanCompiler extends ViewCompiler {
this.compilers.push(
{ selector: `[t-name='${KANBAN_BOX_ATTRIBUTE}']`, fn: this.compileCard },
{ selector: ".oe_kanban_colorpicker", fn: this.compileColorPicker },
- { selector: ".dropdown,.o_kanban_manage_button_section", fn: this.compileDropdown },
+ {
+ selector: ".dropdown,.o_kanban_manage_button_section",
+ fn: this.compileDropdown,
+ doNotCopyAttributes: true,
+ },
{
selector: ".dropdown-toggle,.o_kanban_manage_toggle_button",
fn: this.compileDropdownButton,
+ doNotCopyAttributes: true,
+ },
+ {
+ selector: ".dropdown-menu",
+ fn: this.compileDropdownMenu,
+ doNotCopyAttributes: true,
},
- { selector: ".dropdown-menu", fn: this.compileDropdownMenu },
{ selector: "t[t-call]", fn: this.compileTCall }
);
this.dropdown = null;
@@ -55,6 +64,7 @@ export class KanbanCompiler extends ViewCompiler {
this.dropdown = createElement("Dropdown", {
position: toStringExpression("bottom-end"),
});
+ this.dropdown.setAttribute("class", "'o_dropdown_kanban'");
return this.dropdown;
}
diff --git a/addons/web/static/src/views/kanban/kanban_dashboard.scss b/addons/web/static/src/views/kanban/kanban_dashboard.scss
index 33470b177e6..29164928d5b 100644
--- a/addons/web/static/src/views/kanban/kanban_dashboard.scss
+++ b/addons/web/static/src/views/kanban/kanban_dashboard.scss
@@ -23,6 +23,10 @@
// ------- Dropdown toggle & menu -------
$o-kanban-manage-toggle-height: 35px;
+ .o_dropdown_kanban {
+ visibility: visible;
+ }
+
.o_kanban_manage_toggle_button {
@include o-kanban-dropdown($o-kanban-dashboard-hpadding);
@include o-position-absolute(0, 0);
diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js
index 5d13c7ebe99..f8f277721d5 100644
--- a/addons/web/static/src/views/view_compiler.js
+++ b/addons/web/static/src/views/view_compiler.js
@@ -97,10 +97,6 @@ export function assignOwlDirectives(target, ...sources) {
* @param {Element} compiled
*/
export function copyAttributes(el, compiled) {
- if (getTag(el, true) === "button") {
- return;
- }
-
const isComponent = isComponentNode(compiled);
const classes = el.className;
if (classes) {
@@ -215,7 +211,8 @@ export class ViewCompiler {
this.id = 1;
/** @type {Compiler[]} */
this.compilers = [
- { selector: "a[type],a[data-type],button", fn: this.compileButton },
+ { selector: "a[type],a[data-type]", fn: this.compileButton },
+ { selector: "button", fn: this.compileButton, doNotCopyAttributes: true },
{ selector: "field", fn: this.compileField },
{ selector: "widget", fn: this.compileWidget },
];
@@ -287,7 +284,7 @@ export class ViewCompiler {
let compiledNode;
if (compiler) {
compiledNode = compiler.fn.call(this, node, params);
- if (compiledNode) {
+ if (!compiler.doNotCopyAttributes && compiledNode) {
copyAttributes(node, compiledNode);
}
} else {
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index b628120a0ab..9f1c9b4cc32 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -9874,4 +9874,97 @@ QUnit.module("Views", (hooks) => {
assert.containsNone(target, ".o_kanban_quick_create");
assert.containsN(target, ".o_kanban_group:nth-child(2) .o_kanban_record", 3);
});
+
+ QUnit.test("classes on dropdown menu do not end on dropdown main div", async (assert) => {
+ serverData.models.partner.records.splice(1, 3); // keep one record only
+ await makeView({
+ type: "kanban",
+ resModel: "partner",
+ serverData,
+ arch: `
+
+
+
+
+
+
+
+
+
+
+ `,
+ });
+
+ const dropdown = target.querySelector(".o_kanban_record .o-dropdown");
+ assert.isVisible(dropdown);
+ assert.hasClass(dropdown, "o_dropdown_kanban");
+ assert.doesNotHaveClass(dropdown, "dropdown-menu");
+ assert.doesNotHaveClass(dropdown, "o_kanban_card_manage_pane");
+ await click(dropdown, "button.dropdown-toggle");
+ assert.containsOnce(dropdown, ".o_kanban_card_manage_pane.dropdown-menu");
+ });
+
+ QUnit.test("classes on toggler do not end on dropdown main div", async (assert) => {
+ serverData.models.partner.records.splice(1, 3); // keep one record only
+ await makeView({
+ type: "kanban",
+ resModel: "partner",
+ serverData,
+ arch: `
+
+
+
+
+
+
+
+ `,
+ });
+
+ const dropdown = target.querySelector(".o_kanban_record .o-dropdown");
+ assert.isVisible(dropdown);
+ assert.hasClass(dropdown, "o_dropdown_kanban");
+ assert.doesNotHaveClass(dropdown, "o_kanban_manage_toggle_button");
+ assert.doesNotHaveClass(dropdown, "o_left");
+ assert.containsOnce(dropdown, ".o_kanban_manage_toggle_button.o_left");
+ });
+
+ QUnit.test(
+ "classes on dropdown are on dropdown main div but not the other attributes",
+ async (assert) => {
+ serverData.models.partner.records.splice(1, 3); // keep one record only
+ await makeView({
+ type: "kanban",
+ resModel: "partner",
+ serverData,
+ arch: `
+
+
+
+
+
+
+
+ `,
+ });
+
+ const dropdown = target.querySelector(".o_kanban_record .o-dropdown");
+ assert.isVisible(dropdown);
+ assert.strictEqual(
+ dropdown.className,
+ "o-dropdown dropdown o_dropdown_kanban o_kanban_manage_button_section my_class o-dropdown--no-caret"
+ );
+ assert.notOk(dropdown.hasAttribute("placeholder"));
+ }
+ );
});