[FIX] web: list width should not be calculated when invisible

Before this commit, the width of the headers in a list were frozen
only when the list was seen, but the calculation of the width might have
happened while it was invisible (thus giving the headers 0px).

Now, the freeze AND the calculation only occur when the list is visible
and can actually be evaluated.

Task 2061848

closes odoo/odoo#36175

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/js/views/list/list_editable_renderer.js

@@ -507,7 +507,9 @@ ListRenderer.include({
      */
     updateState: function (state, params) {
         this.columnWidths = false;
-        if (params.keepWidths) {
+        // There are some cases where a record is added to an invisible list
+        // e.g. set a quotation template with optionnal products
+        if (params.keepWidths && this.$el.is(':visible')) {
             this.columnWidths = this.$('thead th').toArray().map(function (th) {
                 return $(th).outerWidth();
             });

addons/web/static/tests/views/list_tests.js

@@ -1698,6 +1698,46 @@ QUnit.module('Views', {
         form.destroy();
     });
 
+    QUnit.test('editable list: updating list state while invisible', async function (assert) {
+        assert.expect(1);
+
+        this.data.foo.onchanges = {
+            bar: function (obj) {
+                obj.o2m = [[5], [0, null, { display_name: "Whatever" }]];
+            },
+        };
+        var form = await createView({
+            View: FormView,
+            model: 'foo',
+            data: this.data,
+            res_id: 1,
+            viewOptions: { mode: 'edit' },
+            arch: '<form>' +
+                    '<sheet>' +
+                        '<field name="bar"/>' +
+                        '<notebook>' +
+                            '<page string="Page 1"></page>' +
+                            '<page string="Page 2">' +
+                                '<field name="o2m">' +
+                                    '<tree editable="bottom">' +
+                                        '<field name="display_name"/>' +
+                                    '</tree>' +
+                                '</field>' +
+                            '</page>' +
+                        '</notebook>' +
+                    '</sheet>' +
+                '</form>',
+        });
+
+        await testUtils.dom.click(form.$('.o_field_boolean input'));
+        await testUtils.dom.click(form.$('.nav-item:last() .nav-link'));
+
+        assert.strictEqual(form.$('th')[0].style.width, "",
+            "Column header should be reset and remain unfrozen");
+
+        form.destroy();
+    });
+
     QUnit.test('editable list: unnamed columns cannot be resized', async function (assert) {
         assert.expect(2);