[FIX] web: editable list: widths when toggling fields

Let's assume the following situation:
 - an empty editable x2many list with date field (or any other
   fixed width field) and optional fields
 - add a record to the list, but discard it directly
 - toggle an optional field

After those steps, the date field doesn't have its hardcoded,
absolute width anymore.

This rev. fixes this issue by clarifying the way the stored widths
are erased when the columns change, preventing to reach a corner
case in which we have stored widths, but we can't apply them, and
thus let the browser uniformly divide the space amongst columns.

1 files changed, 26 insertions, 22 deletions

diff --git a/addons/web/static/src/js/views/list/list_editable_renderer.js b/addons/web/static/src/js/views/list/list_editable_renderer.js
index 73f59e5d13c..a11b326991b 100644
--- a/addons/web/static/src/js/views/list/list_editable_renderer.js
+++ b/addons/web/static/src/js/views/list/list_editable_renderer.js
@@ -492,7 +492,6 @@ ListRenderer.include({
      * @override
      */
     updateState: function (state, params) {
-        this.oldColumns = this.columns;
         this.columnWidths = false;
         if (params.keepWidths) {
             this.columnWidths = this.$('thead th').toArray().map(function (th) {
@@ -542,24 +541,14 @@ ListRenderer.include({
      */
     _freezeColumnWidths: function () {
         if (!this._hasVisibleRecords(this.state) && !this.columnWidths) {
-            // there is no record -> don't force column's widths w.r.t. their label
+            // there is no record nor widths to restore -> don't force column's
+            // widths w.r.t. their label
             return;
         }
-        let restoreWidths = false;
-        if (this.columnWidths) {
-            if (this.oldColumns && this.oldColumns.length === this.columns.length) {
-                for (let i = 0; i < this.oldColumns.length; i++) {
-                    if (this.oldColumns[i] !== this.columns[i]) {
-                        break;
-                    }
-                    restoreWidths = (i === this.oldColumns.length - 1); // columns are as before
-                }
-            }
-        }
         var $thead = this.$('thead');
         $thead.find('th').each((index, th) => {
             var $th = $(th);
-            $th.css('width', restoreWidths ? this.columnWidths[index] : $th.outerWidth() + 'px');
+            $th.css('width', this.columnWidths ? this.columnWidths[index] : $th.outerWidth() + 'px');
         });
         this.$('table').css('table-layout', 'fixed');
     },
@@ -841,22 +830,37 @@ ListRenderer.include({
         });
     },
     /**
-     * Overridden to set weights or explicit width on columns for the fixed layout.
+     * Override to compute the (relative or absolute) width of each column.
      *
      * @override
      * @private
      */
     _processColumns: function () {
+        const oldColumns = this.columns;
         this._super.apply(this, arguments);
         if (this.editable) {
-            this.columns.forEach((column) => {
-                const width = this._getColumnWidth(column);
-                if (width.match(/[a-zA-Z]/)) { // absolute width with measure unit (e.g. 100px)
-                    column.attrs.absoluteWidth = width;
-                } else { // relative width expressed as a weight (e.g. 1.5)
-                    column.attrs.relativeWidth = parseFloat(width, 10);
+            // check if stored widths still apply
+            if (this.columnWidths && oldColumns && oldColumns.length === this.columns.length) {
+                for (let i = 0; i < oldColumns.length; i++) {
+                    if (oldColumns[i] !== this.columns[i]) {
+                        this.columnWidths = false; // columns changed, so forget stored widths
+                        break;
+                    }
                 }
-            });
+            } else {
+                this.columnWidths = false; // columns changed, so forget stored widths
+            }
+            // if we don't have widths yet, computed them
+            if (!this.columnWidths) {
+                this.columns.forEach((column) => {
+                    const width = this._getColumnWidth(column);
+                    if (width.match(/[a-zA-Z]/)) { // absolute width with measure unit (e.g. 100px)
+                        column.attrs.absoluteWidth = width;
+                    } else { // relative width expressed as a weight (e.g. 1.5)
+                        column.attrs.relativeWidth = parseFloat(width, 10);
+                    }
+                });
+            }
         }
     },
     /**