From f00df383eadbe9e2fbce3a9c6808970a330a6a71 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Tue, 23 Aug 2022 11:36:54 +0000
Subject: [PATCH] [FIX] web: correctly compute colspan of empty line in list
 renderer

Previously, the colspan of empty lines in list view did not account for
the fact that the column with the delete action is not always present,
resulting in incorrect colspan on empty lines when it is not.

This commit fixes that by accounting for it, and also fixes the size of
the header of that column, which is supposed to be fixed at 32px but
wasn't in some circumstances.

closes odoo/odoo#98711

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../static/src/views/list/list_renderer.js    | 13 ++++++++-
 .../static/src/views/list/list_renderer.xml   |  6 ++--
 .../web/static/tests/views/list_view_tests.js | 29 +++++++++++++++++++
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
index 34586292319..da45ebb672a 100644
--- a/addons/web/static/src/views/list/list_renderer.js
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -203,7 +203,7 @@ export class ListRenderer extends Component {
         }
 
         const table = this.tableRef.el;
-        const headers = [...table.querySelectorAll("thead th")];
+        const headers = [...table.querySelectorAll("thead th:not(.o_list_record_remove_header)")];
 
         if (!this.columnWidths || !this.columnWidths.length) {
             // no column widths to restore
@@ -333,6 +333,17 @@ export class ListRenderer extends Component {
         return this.props.list.fields;
     }
 
+    get nbCols() {
+        let nbCols = this.state.columns.length;
+        if (this.hasSelectors) {
+            nbCols++;
+        }
+        if (this.props.activeActions && this.props.activeActions.onDelete) {
+            nbCols++;
+        }
+        return nbCols;
+    }
+
     canUseFormatter(column, record) {
         return (
             !record.isInEdition && !column.widget && record.fields[column.name].type !== "boolean"
diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
index 6cadfaa080d..465f9a90630 100644
--- a/addons/web/static/src/views/list/list_renderer.xml
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -75,7 +75,7 @@
             </t>
             <tr t-if="displayRowCreates">
                 <td t-if="withHandleColumn"/>
-                <td t-att-colspan="state.columns.length + 1"
+                <td t-att-colspan="withHandleColumn ? nbCols - 1 : nbCols"
                     class="o_field_x2many_list_row_add"
                     t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev, null)"
                 >
@@ -105,7 +105,7 @@
             </tr>
             <t t-if="!props.list.isGrouped">
                 <tr t-foreach="getEmptyRowIds" t-as="emptyRowId" t-key="emptyRowId">
-                    <td t-att-colspan="state.columns.length + 1">&#8203;</td>
+                    <td t-att-colspan="nbCols">&#8203;</td>
                 </tr>
             </t>
         </t>
@@ -119,7 +119,7 @@
                     <tr t-if="!group.list.isGrouped and props.editable and props.activeActions['create']">
                         <td t-if="hasSelectors"/>
                         <td
-                            t-att-colspan="state.columns.length + 1"
+                            t-att-colspan="hasSelector ? nbCols - 1 : nbCols"
                             class="o_group_field_row_add"
                         >
                             <a href="#"
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index e5f47041df6..b5e08e2e8a6 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -3123,6 +3123,35 @@ QUnit.module("Views", (hooks) => {
         }
     );
 
+    QUnit.test("colspan of empty lines is correct in readonly and edit", async function (assert) {
+        serverData.models.foo.fields.foo_o2m = {
+            string: "Foo O2M",
+            type: "one2many",
+            relation: "foo",
+        };
+        await makeView({
+            type: "form",
+            resModel: "foo",
+            serverData,
+            resId: 1,
+            mode: "readonly",
+            arch: `
+                    <form>
+                        <sheet>
+                            <field name="foo_o2m">
+                                <tree editable="bottom">
+                                    <field name="int_field"/>
+                                </tree>
+                            </field>
+                        </sheet>
+                    </form>`,
+        });
+        assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "1");
+        await clickEdit(target);
+        // in edit mode, the delete action is available and the empty lines should cover that col
+        assert.strictEqual(target.querySelector("tbody td").getAttribute("colspan"), "2");
+    });
+
     QUnit.test(
         "width of some fields should be hardcoded if no data, and list initially invisible",
         async function (assert) {