[FIX] web: list: keep widths when editing records

Let's assume an editable list view with at least two rows. Before
this rev., the column widths were re-computed and frozen each time
a record was switched into 'edit' mode. As a consequence, if the
user clicked on a row, and then on another one, column widths might
slightly change.

Task 2068261

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

@@ -527,9 +527,7 @@ ListRenderer.include({
         // 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();
-            });
+            this._storeColumnWidths();
         }
         if (params.noRender) {
             // the state changed, but we won't do a re-rendering right now, so
@@ -1228,6 +1226,10 @@ ListRenderer.include({
         if (rowIndex === this.currentRow) {
             return Promise.resolve();
         }
+        if (!this.columnWidths) {
+            // we don't want the column widths to change when selecting rows
+            this._storeColumnWidths();
+        }
         this._freezeColumnWidths();
         var recordId = this._getRecordID(rowIndex);
         // To select a row, the currently selected one must be unselected first
@@ -1254,6 +1256,14 @@ ListRenderer.include({
             });
         });
     },
+    /**
+     * @private
+     */
+    _storeColumnWidths: function () {
+        this.columnWidths = this.$('thead th').toArray().map(function (th) {
+            return $(th).outerWidth();
+        });
+    },
 
     //--------------------------------------------------------------------------
     // Handlers

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

@@ -2020,6 +2020,34 @@ QUnit.module('Views', {
         list.destroy();
     });
 
+    QUnit.test('column widths are kept when switching records in edition', async function (assert) {
+        assert.expect(4);
+
+        const list = await createView({
+            View: ListView,
+            model: 'foo',
+            data: this.data,
+            arch: `<tree editable="bottom">
+                    <field name="m2o"/>
+                    <field name="text"/>
+                </tree>`,
+        });
+
+        const width = list.$('th[data-name="m2o"]')[0].offsetWidth;
+
+        await testUtils.dom.click(list.$('.o_data_row:first .o_data_cell:first'));
+
+        assert.hasClass(list.$('.o_data_row:first'), 'o_selected_row');
+        assert.strictEqual(list.$('th[data-name="m2o"]')[0].offsetWidth, width);
+
+        await testUtils.dom.click(list.$('.o_data_row:nth(1) .o_data_cell:first'));
+
+        assert.hasClass(list.$('.o_data_row:nth(1)'), 'o_selected_row');
+        assert.strictEqual(list.$('th[data-name="m2o"]')[0].offsetWidth, width);
+
+        list.destroy();
+    });
+
     QUnit.test('column widths are re-computed on window resize', async function (assert) {
         assert.expect(2);