From 6b90c0004dea5c369a2cb61102d47ee633c136a9 Mon Sep 17 00:00:00 2001
From: Hardik Prajapati <hap@odoo.com>
Date: Thu, 8 Apr 2021 13:35:59 +0000
Subject: [PATCH] [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: d58edef12aab50fcd4494ba3b276e7d9d58d4d56

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>
---
 .../js/views/list/list_editable_renderer.js   |  2 +-
 .../static/tests/legacy/views/list_tests.js   | 41 +++++++++++++++++++
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/legacy/js/views/list/list_editable_renderer.js b/addons/web/static/src/legacy/js/views/list/list_editable_renderer.js
index ad09ed96035..55a24ea75df 100644
--- a/addons/web/static/src/legacy/js/views/list/list_editable_renderer.js
+++ b/addons/web/static/src/legacy/js/views/list/list_editable_renderer.js
@@ -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
diff --git a/addons/web/static/tests/legacy/views/list_tests.js b/addons/web/static/tests/legacy/views/list_tests.js
index e3fe29ae32a..0aa773b1b72 100644
--- a/addons/web/static/tests/legacy/views/list_tests.js
+++ b/addons/web/static/tests/legacy/views/list_tests.js
@@ -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);