From 2ed1f3f94bcff866c88ddb6996bf50f693c64d4f Mon Sep 17 00:00:00 2001
From: FrancoisGe <fge@odoo.com>
Date: Mon, 25 Sep 2023 13:21:28 +0200
Subject: [PATCH] [REF] web: ReferenceField reactive

This commit simplifies the implementation of ReferenceField and makes
it fully reactive.

Currently, the ReferenceField is not automatically rendered when the
relation is updated from the component. The problem does not currently
occur because when a field is updated, a delete is performed on the
invalidField Set, which causes all the Fields to be rendered. This
behaviour is a bug in owl. Performing a delete on a Set that does not
delete any values should not trigger reactivity. When this is fixed, some
tests will no longer pass.

closes odoo/odoo#136433

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../views/fields/reference/reference_field.js | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/addons/web/static/src/views/fields/reference/reference_field.js b/addons/web/static/src/views/fields/reference/reference_field.js
index 3a2142ed2ed..140f7e6b233 100644
--- a/addons/web/static/src/views/fields/reference/reference_field.js
+++ b/addons/web/static/src/views/fields/reference/reference_field.js
@@ -54,15 +54,15 @@ export class ReferenceField extends Component {
         this.state = useState({
             formattedCharValue: undefined, // Value extracted from reference char field
             modelName: undefined, // Name get of the value of the model field
+            currentRelation: undefined,
         });
-        this.currentValue = undefined;
-        this.currentRelation = this.getRelation();
         if (this._isCharField(this.props)) {
             /** Fetch the display name of the record referenced by the field */
+            let currentValue = undefined;
             useRecordObserver(async (record) => {
-                if (this.currentValue !== record.data[this.props.name]) {
+                if (currentValue !== record.data[this.props.name]) {
                     this.state.formattedCharValue = await this._fetchReferenceCharData(this.props);
-                    this.currentValue = record.data[this.props.name];
+                    currentValue = record.data[this.props.name];
                 }
             });
         } else if (this.props.modelField) {
@@ -76,8 +76,6 @@ export class ReferenceField extends Component {
                     this.currentModelId = record.data[this.props.modelField]?.[0];
                 }
             });
-        } else {
-            this.currentValue = this.props.record.data[this.props.name];
         }
     }
 
@@ -118,7 +116,7 @@ export class ReferenceField extends Component {
         if (value && value.resModel) {
             return value.resModel;
         } else {
-            return this.currentRelation;
+            return this.state.currentRelation;
         }
     }
 
@@ -141,18 +139,16 @@ export class ReferenceField extends Component {
     }
 
     updateModel(value) {
-        this.currentRelation = value;
+        this.state.currentRelation = value;
         this.props.record.update({ [this.props.name]: false });
     }
 
     updateM2O(data) {
         const value = data[this.props.name];
-        if (!this.currentRelation) {
-            this.currentRelation = this.getRelation();
-        }
+        const resModel = this.state.currentRelation || this.getRelation();
         this.props.record.update({
             [this.props.name]: value && {
-                resModel: this.currentRelation,
+                resModel,
                 resId: value[0],
                 displayName: value[1],
             },