[FIX] web: resize list in form view overflows

Currently, When the One2many list contains a large amount of fields and the
user clicks or resizes the header, list takes table width as its initial width
and because of this list to overflows outside of the form view.
Issue raised after commit: d58edef12a

after this commit, clicking or resizing the list header does not impact the
width of the list.

TaskID-2388582

closes odoo/odoo#74277

X-original-commit: a145e1242118d3e539790327221486e1bd94e59a
Signed-off-by: Simon Genin (ges@odoo) <ges@odoo.com>
This commit is contained in:
Hardik Prajapati
2021-07-26 17:44:29 +00:00
committed by Mohammed Shekha
parent f466b893a7
commit 6b90c0004d
2 changed files with 42 additions and 1 deletions
@@ -1754,7 +1754,7 @@ ListRenderer.include({
// Fix container width to prevent the table from overflowing when being resized
if (!this.el.style.width) {
this.el.style.width = `${initialTableWidth}px`;
this.el.style.width = `${this.el.offsetWidth}px`;
}
// Apply classes to table and selected column
@@ -11453,6 +11453,47 @@ QUnit.module('Views', {
form.destroy();
});
QUnit.test('resize column with x2many list with several fields in form notebook', async function (assert) {
assert.expect(1);
this.data.foo.records[0].o2m = [1, 2];
const form = await createView({
View: FormView,
model: 'foo',
data: this.data,
arch: `
<form>
<sheet>
<notebook>
<page string="Page 1">
<field name="o2m">
<tree editable="bottom">
<field name="display_name"/>
<field name="display_name"/>
<field name="display_name"/>
<field name="display_name"/>
</tree>
</field>
</page>
</notebook>
</sheet>
</form>`,
res_id: 1,
});
const th = form.el.getElementsByTagName('th')[0];
const resizeHandle = th.getElementsByClassName('o_resize')[0];
const listInitialWidth = form.el.querySelector('.o_list_view').offsetWidth;
await testUtils.dom.dragAndDrop(resizeHandle, form.el.getElementsByTagName('th')[1], { position: "right" });
assert.strictEqual(form.el.querySelector('.o_list_view').offsetWidth, listInitialWidth,
"resizing the column should not impact the width of list");
form.destroy();
});
QUnit.test('enter edition in editable list with <widget>', async function (assert) {
assert.expect(1);