[FIX] web_editor: FieldHtml commitChanges called too soon

The original issue appeared in mass_mailing where triggering the mail
template preview throws a client error.

This commit prevents commitChanges() from being called before the
element is rendered.

Task-ID: 1950784

2 files changed, 21 insertions, 1 deletions

diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js
index a3fc6282ede..b5c69102ff6 100644
--- a/addons/web_editor/static/src/js/backend/convert_inline.js
+++ b/addons/web_editor/static/src/js/backend/convert_inline.js
@@ -396,7 +396,7 @@ FieldHtml.include({
      * @override
      */
     commitChanges: function () {
-        if (this.nodeOptions['style-inline']) {
+        if (this.nodeOptions['style-inline'] && this.isRendered) {
             this._toInline();
         }
         return this._super();
diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js
index fdecf126051..5c7bd70d117 100644
--- a/addons/web_editor/static/tests/field_html_tests.js
+++ b/addons/web_editor/static/tests/field_html_tests.js
@@ -511,6 +511,26 @@ QUnit.test('save immediately before iframe is rendered in edit mode', async func
     form.destroy();
 });
 
+        QUnit.test('save immediately before iframe is rendered in edit mode with style-inline', async function (assert) {
+            assert.expect(1);
+
+            var form = await testUtils.createAsyncView({
+                View: FormView,
+                model: 'note.note',
+                data: this.data,
+                arch: '<form>' +
+                    '<field name="body" widget="html" style="height: 100px" options="{\'cssEdit\': \'template.assets\', \'style-inline\': true}"/>' +
+                    '</form>',
+                res_id: 1,
+            });
+            testUtils.form.clickEdit(form);
+            await testUtils.nextTick();
+            testUtils.form.clickSave(form);
+            await testUtils.nextTick();
+            assert.ok(true, "No traceback encountered. The wysiwyg was cut while not loaded.");
+            form.destroy();
+        });
+
         QUnit.test('use colorpicker and save', async function (assert) {
             assert.expect(1);