[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>
This commit is contained in:
Aaron Bohy
2019-07-05 09:41:30 +00:00
committed by Mohammed Shekha
co-authored by Mohammed Shekha
parent 06c78c8dc2
commit 69ca6bd0a4
2 changed files with 59 additions and 0 deletions
@@ -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',
@@ -1061,6 +1062,16 @@ var FormRenderer = BasicRenderer.extend({
this._activatePreviousFieldWidget(this.state, index);
}
},
/**
* 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
*
@@ -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);