[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:
committed by
Mohammed Shekha
co-authored by
Mohammed Shekha
parent
06c78c8dc2
commit
69ca6bd0a4
@@ -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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user