[IMP] web: resize textarea on notebook tab show

Before this commit: when textarea is on second tab of notebook and it has long
value then autoresize can not compute actual height of the textarea as it is in
second tab and has display: none property, it is not resized until focus comes
on it

After this commit: call DOM_updated event on notebook tab change, DOM_updated
event will call resize method again, so when tab changes resize is called and as
textarea is visible now, proper height is calculated and assigned to textarea.

task-2007558

closes odoo/odoo#34503

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>


Co-authored-by: Mohammed Shekha <msh@odoo.com>

2 files changed, 59 insertions, 0 deletions

diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index 9efadaabe30..98331c9b409 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -16,6 +16,7 @@ var FormRenderer = BasicRenderer.extend({
         'click .o_notification_box .oe_field_translate': '_onTranslate',
         'click .o_notification_box .close': '_onTranslateNotificationClose',
         'click .oe_title, .o_inner_group': '_onClick',
+        'shown.bs.tab a[data-toggle="tab"]': '_onNotebookTabChanged',
     }),
     custom_events: _.extend({}, BasicRenderer.prototype.custom_events, {
         'navigation_move':'_onNavigationMove',
@@ -1062,6 +1063,16 @@ var FormRenderer = BasicRenderer.extend({
         }
     },
     /**
+     * Listen to notebook tab changes and trigger a DOM_updated event such that
+     * widgets in the visible tab can correctly compute their dimensions (e.g.
+     * autoresize on field text)
+     *
+     * @private
+     */
+    _onNotebookTabChanged: function () {
+        core.bus.trigger('DOM_updated');
+    },
+    /**
      * open the translation view for the current field
      *
      * @private
diff --git a/addons/web/static/tests/views/form_tests.js b/addons/web/static/tests/views/form_tests.js
index 9c603e8b051..5ce5718178b 100644
--- a/addons/web/static/tests/views/form_tests.js
+++ b/addons/web/static/tests/views/form_tests.js
@@ -7016,6 +7016,54 @@ QUnit.module('Views', {
         form.destroy();
     });
 
+    QUnit.test('autoresize of text fields is done on notebook page show', async function (assert) {
+        assert.expect(5);
+
+        this.data.partner.fields.text_field = { string: 'Text field', type: 'text' };
+        this.data.partner.fields.text_field.default = "some\n\nmulti\n\nline\n\ntext\n";
+        this.data.partner.records[0].text_field = "a\nb\nc\nd\ne\nf";
+        this.data.partner.fields.text_field_empty = { string: 'Text field', type: 'text' };
+
+        var form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: '<form string="Partners">' +
+                    '<sheet>' +
+                        '<notebook>' +
+                            '<page string="First Page">' +
+                                '<field name="foo"/>' +
+                            '</page>' +
+                            '<page string="Second Page">' +
+                                '<field name="text_field"/>' +
+                            '</page>' +
+                            '<page string="Third Page">' +
+                                '<field name="text_field_empty"/>' +
+                            '</page>' +
+                        '</notebook>' +
+                    '</sheet>' +
+                '</form>',
+            res_id: 1,
+        });
+
+        await testUtils.form.clickEdit(form);
+        assert.hasClass(form.$('.o_notebook .nav .nav-link:first()'), 'active');
+
+        await testUtils.dom.click(form.$('.o_notebook .nav .nav-link:nth(1)'));
+        assert.hasClass(form.$('.o_notebook .nav .nav-link:nth(1)'), 'active');
+
+        var height = form.$('.o_field_widget[name=text_field]').height();
+        assert.ok(height > 80, "textarea should have an height of at least 80px");
+
+        await testUtils.dom.click(form.$('.o_notebook .nav .nav-link:nth(2)'));
+        assert.hasClass(form.$('.o_notebook .nav .nav-link:nth(2)'), 'active');
+
+        var height = form.$('.o_field_widget[name=text_field_empty]').css('height');
+        assert.strictEqual(height, '50px', "empty textarea should have height of 50px");
+
+        form.destroy();
+    });
+
     QUnit.test('check if the view destroys all widgets and instances', async function (assert) {
         assert.expect(1);