[FIX] web: ace field should be mark as dirty as soon as the user type something

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>

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;
     }
 

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",