[FIX] web: model field selector: communicate path in debug input

Have the model field selector popover open, modify the path in the
debug input (bottom input available when isDebugMode=true), then close
the popover by clicking away. The model field selector is correctly
updated but its parent does not receive the right path. This happens
because onClose is called before the function update passed to the
popover is called.
Here we make the popover communicate its current path on each input
event so that if the popover has to be closed, the model field selector
knows which path to communicate to its parent.

closes odoo/odoo#141362

X-original-commit: 6a4e4221a1daa474217070f6a78602a962bbcf65
Related: odoo/enterprise#50337
Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>

addons/web/static/src/core/model_field_selector/model_field_selector.js

@@ -57,9 +57,11 @@ export class ModelFieldSelector extends Component {
         this.popover.open(currentTarget, {
             resModel: this.props.resModel,
             path: this.props.path,
-            update: (path) => {
+            update: (path, debug = false) => {
                 this.newPath = path;
-                this.updateState({ ...this.props, path }, true);
+                if (!debug) {
+                    this.updateState({ ...this.props, path }, true);
+                }
             },
             showSearchInput: this.props.showSearchInput,
             isDebugMode: this.props.isDebugMode,

addons/web/static/src/core/model_field_selector/model_field_selector_popover.xml

@@ -52,7 +52,7 @@
             </div>
             <t t-if="props.isDebugMode">
                 <div class="o_model_field_selector_popover_footer">
-                    <input type="text" class="o_model_field_selector_debug o_input" t-att-value="state.page.path" t-on-change="(ev) => this.loadNewPath(ev.target.value)" t-on-keydown="onDebugInputKeydown"/>
+                    <input type="text" class="o_model_field_selector_debug o_input" t-att-value="state.page.path" t-on-change="(ev) => this.loadNewPath(ev.target.value)" t-on-keydown="onDebugInputKeydown" t-on-input="(ev) => this.props.update(ev.target.value, true)"/>
                 </div>
             </t>
         </div>

addons/web/static/tests/core/model_field_selector_tests.js

@@ -963,4 +963,42 @@ QUnit.module("Components", (hooks) => {
         assert.containsNone(target, ".o_model_field_selector .fa.fa-times");
         assert.verifySteps([`path is ""`]);
     });
+
+    QUnit.test("Modify path in popover debug input and click away", async (assert) => {
+        class Parent extends Component {
+            setup() {
+                this.path = "foo";
+            }
+            onUpdate(path) {
+                this.path = path;
+                assert.step(path);
+                this.render();
+            }
+        }
+        Parent.components = { ModelFieldSelector };
+        Parent.template = xml`
+                    <ModelFieldSelector
+                        readonly="false"
+                        resModel="'partner'"
+                        path="path"
+                        isDebugMode="true"
+                        update="(pathInfo) => this.onUpdate(pathInfo)"
+                    />
+                `;
+
+        await mountComponent(Parent);
+        assert.deepEqual(getModelFieldSelectorValues(target), ["Foo"]);
+
+        await openModelFieldSelectorPopover(target);
+        const input = target.querySelector(
+            ".o_model_field_selector_popover .o_model_field_selector_debug"
+        );
+        input.value = "foooooo";
+        await triggerEvent(input, null, "input");
+        assert.deepEqual(getModelFieldSelectorValues(target), ["Foo"]);
+
+        await click(target);
+        assert.deepEqual(getModelFieldSelectorValues(target), ["foooooo"]);
+        assert.verifySteps(["foooooo"]);
+    });
 });