[FIX] web: editable list: force min-width to some columns

Columns with an absolute width (e.g. '120px') must always have a
width of at least that value. When there are records in the list
the column's widths are computed by the browser according to the
content (in readonly). However, for some field types, the rendering
in edition is a bit wider (e.g. date(time) fields because of the
caret).

This rev. sets a min-width to those fields such that the rendering
is also correct in edition.

2 files changed, 54 insertions, 17 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 2ff25108795..73f59e5d13c 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
@@ -933,23 +933,34 @@ ListRenderer.include({
     _renderHeader: function () {
         var $thead = this._super.apply(this, arguments);
 
-        if (this.editable && !this._hasVisibleRecords(this.state) && !this.columnWidths) {
-            // we compute the sum of the weights for each columns, excluding
-            // those with an absolute width.
-            var totalWidth = this.columns.reduce(function (acc, column) {
-                return acc + (column.attrs.relativeWidth || 0);
-            }, 0);
-            this.columns.forEach(function (column) {
-                let width;
-                if (column.attrs.absoluteWidth) {
-                    width = column.attrs.absoluteWidth;
-                } else if (column.attrs.relativeWidth) {
-                    width = ((column.attrs.relativeWidth / totalWidth * 100) + '%');
-                }
-                if (width) {
-                    $thead.find('th[data-name=' + column.attrs.name + ']').css('width', width);
-                }
-            });
+        if (this.editable && !this.columnWidths) {
+            if (!this._hasVisibleRecords(this.state)) {
+                // we compute the sum of the weights for each columns, excluding
+                // those with an absolute width.
+                var totalWidth = this.columns.reduce(function (acc, column) {
+                    return acc + (column.attrs.relativeWidth || 0);
+                }, 0);
+                this.columns.forEach(function (column) {
+                    let width;
+                    if (column.attrs.absoluteWidth) {
+                        width = column.attrs.absoluteWidth;
+                    } else if (column.attrs.relativeWidth) {
+                        width = ((column.attrs.relativeWidth / totalWidth * 100) + '%');
+                    }
+                    if (width) {
+                        $thead.find('th[data-name=' + column.attrs.name + ']').css('width', width);
+                    }
+                });
+            } else {
+                // if there are records, we force a min-width for fields with an
+                // absolute width to ensure a correct rendering in edition
+                this.columns.forEach(function (column) {
+                    if (column.attrs.absoluteWidth) {
+                        let width = column.attrs.absoluteWidth;
+                        $thead.find('th[data-name=' + column.attrs.name + ']').css('min-width', width);
+                    }
+                });
+            }
         }
 
         if (this.addTrashIcon) {
diff --git a/addons/web/static/tests/views/list_tests.js b/addons/web/static/tests/views/list_tests.js
index fa78f98ee23..05791ad9d74 100644
--- a/addons/web/static/tests/views/list_tests.js
+++ b/addons/web/static/tests/views/list_tests.js
@@ -1605,6 +1605,32 @@ QUnit.module('Views', {
         list.destroy();
     });
 
+    QUnit.test('columns with an absolute width are never narrower than that width', async function (assert) {
+        assert.expect(2);
+
+        this.data.foo.records[0].text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' +
+            'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ' +
+            'veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo ' +
+            'consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum ' +
+            'dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, ' +
+            'sunt in culpa qui officia deserunt mollit anim id est laborum';
+        var list = await createView({
+            View: ListView,
+            model: 'foo',
+            data: this.data,
+            arch: '<tree editable="bottom">' +
+                        '<field name="datetime"/>' +
+                        '<field name="int_field" width="200px"/>' +
+                        '<field name="text"/>' +
+                    '</tree>',
+        });
+
+        assert.strictEqual(list.$('th[data-name="datetime"]')[0].offsetWidth, 146);
+        assert.strictEqual(list.$('th[data-name="int_field"]')[0].offsetWidth, 200);
+
+        list.destroy();
+    });
+
     QUnit.test('column widths are kept when editing multiple records', async function (assert) {
         assert.expect(4);