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: '' + + '' + + '' + + '' + + '', + }); + + 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);