From ec7fa71bc5f963948f1cdcec51b1f59ba4e67182 Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Thu, 28 Jul 2022 07:05:03 +0000
Subject: [PATCH] [FIX] web: classNames set on fields in list view

This commit fixes the case where classNames set on fields
used in list views were set on the cell instead. This was
causing style issues as some classnames could modify the
display option of the cell instead of styling the field
appropriately. As the layout could break easily, it is more
safe to only apply the classnames to the root div of field
elements.

A test has been added to verify this behavior.

Part-of: odoo/odoo#96957
---
 .../static/src/views/list/list_renderer.js    | 10 +++++-
 .../static/src/views/list/list_renderer.xml   |  2 +-
 .../web/static/tests/views/list_view_tests.js | 35 +++++++++++++++++++
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
index 0d90273beb4..c9dee1fe045 100644
--- a/addons/web/static/src/views/list/list_renderer.js
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -591,7 +591,11 @@ export class ListRenderer extends Component {
                 classNames.push("o_list_button");
             } else if (column.type === "field") {
                 classNames.push("o_field_cell");
-                if (column.rawAttrs && column.rawAttrs.class) {
+                if (
+                    column.rawAttrs &&
+                    column.rawAttrs.class &&
+                    this.canUseFormatter(column, record)
+                ) {
                     classNames.push(column.rawAttrs.class);
                 }
                 const typeClass = FIELD_CLASSES[this.fields[column.name].type];
@@ -639,6 +643,10 @@ export class ListRenderer extends Component {
         }
     }
 
+    getFieldClass(column) {
+        return column.rawAttrs && column.rawAttrs.class;
+    }
+
     getFormattedValue(column, record) {
         const fieldName = column.name;
         const field = this.fields[fieldName];
diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
index ccf5fd68ddd..ccaac21ce05 100644
--- a/addons/web/static/src/views/list/list_renderer.xml
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -183,7 +183,7 @@
                     <td t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, group, record)" class="o_data_cell" t-att-name="column.name" t-att-class="getCellClass(column, record)" t-att-data-tooltip="getCellTitle(column, record)" data-tooltip-delay="1000" t-on-click="(ev) => this.onCellClicked(record, column, ev)" tabindex="-1">
                         <t t-if="!evalModifier(column.modifiers.invisible, record)">
                             <t t-if="canUseFormatter(column, record)" t-esc="getFormattedValue(column, record)"/>
-                            <Field t-else="" name="column.name" record="record" type="column.widget" fieldInfo="props.archInfo.fieldNodes[column.name]" setDirty="(isDirty) => this.setDirty(isDirty)"/>
+                            <Field t-else="" name="column.name" record="record" type="column.widget" class="getFieldClass(column)" fieldInfo="props.archInfo.fieldNodes[column.name]" setDirty="(isDirty) => this.setDirty(isDirty)"/>
                         </t>
                     </td>
                 </t>
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index 1d293533988..3b27383c03d 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -14478,4 +14478,39 @@ QUnit.module("Views", (hooks) => {
 
         assert.verifySteps(["create"]);
     });
+    QUnit.test(
+        "classNames given to a field are set on the right field directly",
+        async function (assert) {
+            await makeView({
+                type: "list",
+                resModel: "foo",
+                serverData,
+                arch: `
+                <tree editable="bottom">
+                    <field class="d-flex align-items-center" name="int_field" widget="progressbar" options="{'editable': true}" />
+                    <field class="d-none" name="bar" />
+                </tree>`,
+            });
+            assert.doesNotHaveClass(
+                target.querySelector(".o_field_cell:nth-child(2)"),
+                "d-flex align-items-center",
+                "classnames are not set on the first cell"
+            );
+            assert.hasClass(
+                target.querySelector(".o_field_progressbar"),
+                "d-flex align-items-center",
+                "classnames are set on the corresponding field div directly"
+            );
+            assert.doesNotHaveClass(
+                target.querySelector(".o_field_cell:nth-child(3)"),
+                "d-none",
+                "classnames are not set on the second cell"
+            );
+            assert.hasClass(
+                target.querySelector(".o_field_boolean"),
+                "d-none",
+                "classnames are set on the second field div directly"
+            );
+        }
+    );
 });