[FIX] web: reload many2xautocomplete component on props update

Steps to reproduce the issue:

1. Open Menu Items
2. Open the form to a menu
3. Select an action type (e.g. ir.actions.report)
4. Select another action type (e.g. ir.actions.act_url)
5. Click on the field next to it
6. Click on "View all"
7. The results displayed match the first action type selected (report), not the second (act_url)

Explanation:

`res_model` is initiated in two functions: `useOpenMany2XRecord()` and `useSelectCreate()` in the `setup()` of the `Many2XAutocomplete` class. The value is never updated for as long as this instance of the field exists.

Suggested fix:

Everytime the key changes, a new instance of the field will replace the current one, calling its own `setup()` with the updated values.

opw-3628017

closes odoo/odoo#151495

X-original-commit: d4078d783717986189f9fbc1b6dd6b264e41e49e
Signed-off-by: Francois Georis (fge) <fge@odoo.com>
Signed-off-by: Stroobant Paul (stpa) <stpa@odoo.com>

addons/web/static/src/views/fields/reference/reference_field.xml

@@ -15,7 +15,10 @@
                 </select>
             </t>
             <t t-if="relation">
-                <Many2OneField t-props="m2oProps" />
+                <Many2OneField
+                    t-key="m2oProps.relation"
+                    t-props="m2oProps"
+                />
             </t>
         </div>
     </t>

addons/web/static/tests/views/fields/reference_field_tests.js

@@ -526,6 +526,37 @@ QUnit.module("Fields", (hooks) => {
         );
     });
 
+    QUnit.test("Many2One 'Search more...' updates on resModel change", async function (assert) {
+
+        serverData.views = {
+            "product,false,list": '<tree><field name="display_name"/></tree>',
+            "product,false,search": '<search/>',
+        };
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: '<form><field name="reference"/></form>',
+        });
+
+        // Selecting a relation
+        await editSelect(target.querySelector("div.o_field_reference"), "select.o_input", "partner_type");
+
+        // Selecting another relation
+        await editSelect(target.querySelector("div.o_field_reference"), "select.o_input", "product");
+
+        // Opening the Search More... option
+        await click(target.querySelector("div.o_field_reference"), "input.o_input");
+        await click(target.querySelector("div.o_field_reference"), ".o_m2o_dropdown_option_search_more");
+
+        assert.strictEqual(
+            target.querySelector("div.modal td.o_data_cell").innerText,
+            "xphone",
+            "The search more should lead to the values of product."
+        );
+    });
+
     QUnit.test(
         "computed reference field changed by onchange to 'False,0' value",
         async function (assert) {
@@ -811,6 +842,7 @@ QUnit.module("Fields", (hooks) => {
 
         await editInput(target, ".o_field_widget[name='model_id'] input", "Partner");
         await click(target, ".ui-autocomplete .ui-menu-item:first-child");
+        await nextTick();
         assert.strictEqual(
             target.querySelector(".o_field_widget[name='reference'] input").value,
             "",
@@ -1028,6 +1060,7 @@ QUnit.module("Fields", (hooks) => {
             //Select the "Partner" option, different from original "Product"
             const dropdownItems = [...target.querySelectorAll(".o_list_table .o_list_many2one .o_input_dropdown .dropdown-item")];
             await click(dropdownItems.filter(item => item.text === "Partner")[0]);
+            await nextTick();
             assert.strictEqual(target.querySelector(".reference_field input").value, "");
             assert.strictEqual(target.querySelector(".o_list_many2one input").value, "Partner");
             //Void the associated, required, "reference" field and make sure the form marks the field as required