[FIX] web: don't use the compileButton fn for bootstrap toggles

Steps to reproduce
==================

- Use a mobile (xs) viewport
- Go to sign
- Click on "Action"

-> InvalidButtonParamsError

Cause of the issue
==================

The bootstrap button should not be compiled as an action button

Solution
========

Don't call compileButton for button with the data-bs-toggle attribute
We also need to cancel the global click to let bootstrap handle the
action

opw-3278906

closes odoo/odoo#123579

X-original-commit: 5f569eedf9ed4e19b1fab1c83f7d315684097a7f
Related: odoo/enterprise#41906
Signed-off-by: Julien Mougenot (jum) <jum@odoo.com>

addons/web/static/src/views/kanban/kanban_record.js

@@ -30,7 +30,7 @@ const { COLORS } = ColorList;
 const formatters = registry.category("formatters");
 
 // These classes determine whether a click on a record should open it.
-export const CANCEL_GLOBAL_CLICK = ["a", ".dropdown", ".oe_kanban_action"].join(",");
+export const CANCEL_GLOBAL_CLICK = ["a", ".dropdown", ".oe_kanban_action", "[data-bs-toggle]"].join(",");
 const ALLOW_GLOBAL_CLICK = [".oe_kanban_global_click", ".oe_kanban_global_click_edit"].join(",");
 
 /**

addons/web/static/src/views/view_compiler.js

@@ -199,8 +199,8 @@ export class ViewCompiler {
         this.id = 1;
         /** @type {Compiler[]} */
         this.compilers = [
-            { selector: "a[type],a[data-type]", fn: this.compileButton },
-            { selector: "button", fn: this.compileButton, doNotCopyAttributes: true },
+            { selector: "a[type]:not([data-bs-toggle]),a[data-type]:not([data-bs-toggle])", fn: this.compileButton },
+            { selector: "button:not([data-bs-toggle])", fn: this.compileButton, doNotCopyAttributes: true },
             { selector: "field", fn: this.compileField },
             { selector: "widget", fn: this.compileWidget },
         ];

addons/web/static/tests/views/kanban/kanban_compiler_tests.js

@@ -0,0 +1,56 @@
+/** @odoo-module **/
+import { KanbanCompiler } from "@web/views/kanban/kanban_compiler";
+import { registry } from "@web/core/registry";
+import { makeFakeLocalizationService } from "@web/../tests/helpers/mock_services";
+
+function compileTemplate(arch) {
+    const parser = new DOMParser();
+    const xml = parser.parseFromString(arch, "text/xml");
+    const compiler = new KanbanCompiler({ kanban: xml.documentElement });
+    return compiler.compile("kanban").outerHTML;
+}
+
+function assertTemplatesEqual(template1, template2) {
+    if (template1.replace(/\s/g, "") === template2.replace(/\s/g, "")) {
+        QUnit.assert.ok(true);
+    } else {
+        QUnit.assert.strictEqual(template1, template2);
+    }
+}
+
+QUnit.module("Kanban Compiler", (hooks) => {
+    hooks.beforeEach(() => {
+        // compiler generates a piece of template for the translate alert in multilang
+        registry.category("services").add("localization", makeFakeLocalizationService());
+    });
+
+    QUnit.test("bootstrap dropdowns with kanban_ignore_dropdown class should be left as is", async () => {
+        const arch = `<kanban>
+            <templates>
+                <t t-name="kanban-box">
+                    <div>
+                        <button name="dropdown" class="kanban_ignore_dropdown" type="button" data-bs-toggle="dropdown">Boostrap dropdown</button>
+                        <div class="dropdown-menu kanban_ignore_dropdown" role="menu">
+                            <span>Dropdown content</span>
+                        </div>
+                    </div>
+                </t>
+            </templates>
+        </kanban>`;
+        const expected = `<t>
+            <kanban>
+                <templates>
+                    <t t-name="kanban-box">
+                        <div>
+                            <button name="dropdown" class="kanban_ignore_dropdown" type="button" data-bs-toggle="dropdown">Boostrap dropdown</button>
+                            <div class="dropdown-menu kanban_ignore_dropdown" role="menu">
+                                <span>Dropdown content</span>
+                            </div>
+                        </div>
+                    </t>
+                </templates>
+            </kanban>
+        </t>`;
+        assertTemplatesEqual(compileTemplate(arch), expected);
+    });
+});