[FIX] web: compute the correct height for textarea autoresize

The box-sizing property was not correctly taken into account.

- content-box is the standard behavior: border and padding are added after the height
- border-box needs attention: border and padding must be included into the computed height

Task: 1869469
PR: #26430

2 files changed, 35 insertions, 5 deletions

diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index 7e3cb6128b9..eaff2185de9 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -74,12 +74,12 @@ return {
 
         function resize() {
             $fixedTextarea.insertAfter($textarea);
-            var heightOffset;
+            var heightOffset = 0;
             var style = window.getComputedStyle($textarea[0], null);
-            if (style.boxSizing === 'content-box') {
-                heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
-            } else {
-                heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+            if (style.boxSizing === 'border-box') {
+                var paddingHeight = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+                var borderHeight = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
+                heightOffset = borderHeight + paddingHeight;
             }
             $fixedTextarea.width($textarea.width());
             $fixedTextarea.val($textarea.val());
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index 4036594609f..e1da69fe9c5 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -1457,6 +1457,36 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
+    QUnit.test('text fields edit mode inside list have correct height on focus', function (assert) {
+        assert.expect(2);
+
+        this.data.partner.records[0].txt = "a\nb\nc\nd\ne\nf";
+
+        var list = createView({
+            View: ListView,
+            model: 'partner',
+            data: this.data,
+            arch: '<list editable="top">' +
+                    '<field name="txt"/>' +
+                '</list>',
+        });
+
+        // Click to enter edit: in this test we specifically rely on setting
+        // the focus on the textarea to trigger the resize.
+        // The main goal is to test the size is correct, not how it is triggered.
+        list.$('.o_data_cell:first').click();
+        var $textarea = list.$('textarea:first');
+
+        // make sure the correct data is there
+        assert.strictEqual($textarea.val(), this.data.partner.records[0].txt);
+
+        // make sure there is no scroll bar
+        assert.strictEqual($textarea.innerHeight(), $textarea[0].scrollHeight,
+            "textarea should not have a scroll bar");
+
+        list.destroy();
+    });
+
     QUnit.test('text field translatable', function (assert) {
         assert.expect(3);