From ee56ebd074faaee0d1a10777fc1689f288e0298f Mon Sep 17 00:00:00 2001
From: Jorge Pinna Puissant <jpp@odoo.com>
Date: Thu, 27 Jul 2023 09:21:57 +0000
Subject: [PATCH] [FIX] web: ace field should be mark as dirty as soon as the
 user type something
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Before this commit, the ace field was marked as dirty only on a blur,
this behavior is incoherent vis-à-vis the other fields that are mark as
dirty as soon as the user type something. Also, this field can be large,
and the user can work in it for a long time, and it's important for the
user to have a visual feedback (the save and discard buttons), when
modifying this field (this is already the behavior of the similar html
field).

closes odoo/odoo#129995

X-original-commit: 186013f3df78b629b997fc0acf5043b545198a9e
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../static/src/views/fields/ace/ace_field.js  |  8 +++-
 .../views/fields/ace_editor_field_tests.js    | 38 +++++++++++++++++++
 2 files changed, 44 insertions(+), 2 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 731cea07a12..4508536db29 100644
--- a/addons/web/static/src/views/fields/ace/ace_field.js
+++ b/addons/web/static/src/views/fields/ace/ace_field.js
@@ -46,8 +46,12 @@ export class AceField extends Component {
     }
 
     handleChange(editedValue) {
-        this.props.record.model.bus.trigger("FIELD_IS_DIRTY", true);
-        this.isDirty = true;
+        if (this.state.initialValue !== editedValue) {
+            this.isDirty = true;
+        } else {
+            this.isDirty = false;
+        }
+        this.props.record.model.bus.trigger("FIELD_IS_DIRTY", this.isDirty);
         this.editedValue = editedValue;
     }
 
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 5b1575cf0d7..fae5ac0007b 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,4 +1,5 @@
 /** @odoo-module **/
+/* global ace */
 
 import { registry } from "@web/core/registry";
 import {
@@ -68,6 +69,43 @@ QUnit.module("Fields", (hooks) => {
         assert.ok(target.querySelector(".o_field_code").textContent.includes("yop"));
     });
 
+    QUnit.test("AceEditorField mark as dirty as soon at onchange", async function (assert) {
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            resId: 1,
+            serverData,
+            arch: `
+                <form>
+                    <field name="foo" widget="code" />
+                </form>`,
+        });
+
+        assert.ok("ace" in window, "the ace library should be loaded");
+        assert.containsOnce(
+            target,
+            "div.ace_content",
+            "should have rendered something with ace editor"
+        );
+
+        assert.ok(target.querySelector(".o_field_code").textContent.includes("yop"));
+        // edit the foo field
+        const aceEditor = target.querySelector(".ace_editor");
+        ace.edit(aceEditor).setValue("blip");
+        await nextTick();
+        assert.containsOnce(target, ".o_form_status_indicator_buttons");
+        assert.doesNotHaveClass(
+            target.querySelector(".o_form_status_indicator_buttons"),
+            "invisible"
+        );
+
+        // revert edition
+        ace.edit(aceEditor).setValue("yop");
+        await nextTick();
+        assert.containsOnce(target, ".o_form_status_indicator_buttons");
+        assert.hasClass(target.querySelector(".o_form_status_indicator_buttons"), "invisible");
+    });
+
     QUnit.test("AceEditorField on html fields works", async function (assert) {
         serverData.models.partner.fields.htmlField = {
             string: "HTML Field",