From c0a67682cb9ab8afb6d9c190a85df6a8f6151e21 Mon Sep 17 00:00:00 2001
From: Lucas Perais <lpe@odoo.com>
Date: Thu, 14 Jul 2022 08:04:08 +0000
Subject: [PATCH] [FIX] web: AceField: reset ace lib only if editor's element
 has changed

Before this commit, the ace editor crashed when switching to edit mode or
when clicking in it.

After this commit, it works as expected.

Part-of: odoo/odoo#78221
---
 .../static/src/views/fields/ace/ace_field.js  | 11 ++++++----
 .../views/fields/ace_editor_field_tests.js    | 20 ++++++++++++++++++-
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/addons/web/static/src/views/fields/ace/ace_field.js b/addons/web/static/src/views/fields/ace/ace_field.js
index e213fbcba7f..e7c87b0e443 100644
--- a/addons/web/static/src/views/fields/ace/ace_field.js
+++ b/addons/web/static/src/views/fields/ace/ace_field.js
@@ -25,10 +25,13 @@ export class AceField extends Component {
             return Promise.all(proms);
         });
 
-        useEffect(() => {
-            this.setupAce();
-            return () => this.destroyAce();
-        });
+        useEffect(
+            () => {
+                this.setupAce();
+                return () => this.destroyAce();
+            },
+            () => [this.editorRef.el]
+        );
     }
 
     get aceSession() {
diff --git a/addons/web/static/tests/views/fields/ace_editor_field_tests.js b/addons/web/static/tests/views/fields/ace_editor_field_tests.js
index ff5056da2fb..d3c4f84a57f 100644
--- a/addons/web/static/tests/views/fields/ace_editor_field_tests.js
+++ b/addons/web/static/tests/views/fields/ace_editor_field_tests.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { getFixture } from "@web/../tests/helpers/utils";
+import { getFixture, clickEdit, triggerEvents } from "@web/../tests/helpers/utils";
 import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
 
 let serverData;
@@ -57,4 +57,22 @@ QUnit.module("Fields", (hooks) => {
 
         assert.ok(target.querySelector(".o_field_ace").textContent.includes("yop"));
     });
+
+    QUnit.test("AceEditorField doesn't crash when editing", async (assert) => {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="display_name" />
+                    <field name="foo" widget="ace" />
+                </form>`,
+        });
+
+        await clickEdit(target);
+        await triggerEvents(target, ".ace-view-editor textarea", ["focus", "click"]);
+        assert.hasClass(target.querySelector(".ace-view-editor"), "ace_focus");
+    });
 });