From 7095310672bb0c7aa250a6cc8c8ddc8ae115bab9 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Mon, 5 Dec 2022 08:22:46 +0000
Subject: [PATCH] [FIX] web: view compiler: generic tags are case insensitive

In html, tags are case-insensitive. However, owl templates aren't,
as nodes starting with a capital letter are considered as component
nodes (not html). This means that people can use capital letters in
form or kanban archs for html nodes and it should work.

Before this commit, it didn't, because the compiler kept the case
when generating the owl templates. For instance, an arch like
`<form><Div/></form/>` produced the error 'Cannot find the
definition of component "Div"'. This commit fixes the issue.

Part-of: odoo/odoo#108221
---
 addons/web/static/src/views/view_compiler.js     |  2 +-
 .../static/tests/views/form/form_view_tests.js   | 14 ++++++++++++++
 .../web/static/tests/views/kanban_view_tests.js  | 16 ++++++++++++++++
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/views/view_compiler.js b/addons/web/static/src/views/view_compiler.js
index 26c9fb63e90..a6d2baa0ad2 100644
--- a/addons/web/static/src/views/view_compiler.js
+++ b/addons/web/static/src/views/view_compiler.js
@@ -398,7 +398,7 @@ export class ViewCompiler {
      * @returns {Element}
      */
     compileGenericNode(el, params) {
-        const compiled = createElement(el.nodeName);
+        const compiled = createElement(el.nodeName.toLowerCase());
         const metaAttrs = ["modifiers", "attrs", "invisible", "readonly"];
         for (const attr of el.attributes) {
             if (metaAttrs.includes(attr.name)) {
diff --git a/addons/web/static/tests/views/form/form_view_tests.js b/addons/web/static/tests/views/form/form_view_tests.js
index 9e27c629481..6c343a5c2e2 100644
--- a/addons/web/static/tests/views/form/form_view_tests.js
+++ b/addons/web/static/tests/views/form/form_view_tests.js
@@ -295,6 +295,20 @@ QUnit.module("Views", (hooks) => {
         assert.containsNone(target, "label.o_form_label_empty:contains(timmy)");
     });
 
+    QUnit.test("generic tags are case insensitive", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <form>
+                    <Div class="test">Hello</Div>
+                </form>`,
+        });
+
+        assert.containsOnce(target, "div.test");
+    });
+
     QUnit.test("form view with a group that contains an invisible group", async function (assert) {
         await makeView({
             type: "form",
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index 88daa42a4ad..9e7538b91bb 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -363,6 +363,22 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(target, ".o_kanban_record:contains(gnap)");
     });
 
+    QUnit.test("generic tags are case insensitive", async function (assert) {
+        await makeView({
+            type: "kanban",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <kanban>
+                    <templates><t t-name="kanban-box">
+                        <Div class="test">Hello</Div>
+                    </t></templates>
+                </kanban>`,
+        });
+
+        assert.containsN(target, "div.test", 4);
+    });
+
     QUnit.test("display full is supported on fields", async (assert) => {
         await makeView({
             type: "kanban",