[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

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];

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>

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"
+            );
+        }
+    );
 });