From 289adeb63f51a9af26b8f383ba80089aa7aa6d87 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Theys?= <seb@odoo.com>
Date: Tue, 21 Aug 2018 16:13:33 +0200
Subject: [PATCH] [FIX] web: properly resize textarea when its value changes

Before this commit, a textarea would not resize when its value changed if the event was different than "input" or "focus".

This commit fixes it by also listening to the "change" event, and by triggering it at appropriate times.

PR: #26430
Task: 1869469
---
 .../src/js/section_and_note_fields_backend.js | 14 ++++++++
 addons/web/static/src/js/core/dom.js          |  5 +--
 .../web/static/src/js/fields/basic_fields.js  | 12 ++++++-
 .../static/tests/fields/basic_fields_tests.js | 36 +++++++++++++++++++
 4 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/addons/account/static/src/js/section_and_note_fields_backend.js b/addons/account/static/src/js/section_and_note_fields_backend.js
index 0c3039ce477..a8640fa21f1 100644
--- a/addons/account/static/src/js/section_and_note_fields_backend.js
+++ b/addons/account/static/src/js/section_and_note_fields_backend.js
@@ -130,6 +130,20 @@ var SectionAndNoteFieldText = InputField.extend(TranslatableFieldMixin, {
         }
         return this._super.apply(this, arguments);
     },
+     /**
+     * Override to force a resize of the textarea when its value has changed
+     *
+     * @override
+     */
+    reset: function () {
+        if (!this.isSection) {
+            var self = this;
+            return $.when(this._super.apply(this, arguments)).then(function () {
+                self.$input.trigger('change');
+            });
+        }
+        return this._super.apply(this, arguments);
+    },
 
     //--------------------------------------------------------------------------
     // Handlers
diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index eaff2185de9..7cec476d2c6 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -91,7 +91,8 @@ return {
         minHeight = (options && options.min_height) || 50;
 
         $fixedTextarea = $('<textarea disabled>', {
-            class: $textarea[0].className,});
+            class: $textarea[0].className,
+        });
 
         var direction = _t.database.parameters.direction === 'rtl' ? 'right' : 'left';
         $fixedTextarea.css({
@@ -111,7 +112,7 @@ return {
         resize();
         $textarea.data("auto_resize", true);
 
-        $textarea.on('input focus', resize);
+        $textarea.on('input focus change', resize);
         if (options.parent) {
             core.bus.on('DOM_updated', options.parent, resize);
             core.bus.on('view_shown', options.parent, resize);
diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index fdefb2cf967..3bc6cfe4b84 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1066,7 +1066,17 @@ var FieldText = InputField.extend(TranslatableFieldMixin, {
         }
         return this._super();
     },
-
+    /**
+     * Override to force a resize of the textarea when its value has changed
+     *
+     * @override
+     */
+    reset: function () {
+        var self = this;
+        return $.when(this._super.apply(this, arguments)).then(function () {
+            self.$input.trigger('change');
+        });
+    },
     //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index e1da69fe9c5..3e545ad1681 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -1487,6 +1487,42 @@ QUnit.module('basic_fields', {
         list.destroy();
     });
 
+    QUnit.test('text fields in edit mode should resize on reset', function (assert) {
+        assert.expect(1);
+
+        this.data.partner.fields.foo.type = 'text';
+
+        this.data.partner.onchanges = {
+            bar: function (obj) {
+                obj.foo = 'a\nb\nc\nd\ne\nf';
+            },
+        };
+
+        var form = createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form string="Partners">' +
+                    '<field name="bar"/>' +
+                    '<field name="foo"/>' +
+                '</form>',
+            res_id: 1,
+        });
+
+        // edit the form
+        // trigger a textarea reset (through onchange) by clicking the box
+        // then check there is no scroll bar
+        form.$buttons.find('.o_form_button_edit').click();
+
+        form.$('div[name="bar"] input').click();
+
+        var $textarea = form.$('textarea:first');
+        assert.strictEqual($textarea.innerHeight(), $textarea[0].scrollHeight,
+            "textarea should not have a scroll bar");
+
+        form.destroy();
+    });
+
     QUnit.test('text field translatable', function (assert) {
         assert.expect(3);