From 956393ab90ee674a1c136ef6acfe92eb93869fb7 Mon Sep 17 00:00:00 2001
From: FrancoisGe <fge@odoo.com>
Date: Tue, 5 Sep 2023 08:53:20 +0200
Subject: [PATCH] [FIX] web: clean input m2mTagsAvatar

Before this commit, performing a search in a Many2manyTagsAvatarFields
and selecting an element does not remove the search value from the input.

Why not?
The value passed to Autocomplete is the default ''.
As this value never changes, onWillUpdateProps is never called and cannot
empty the input.

Solution:
Use the resetOnSelect option to force the input to be reset at each select
if props.value is the default value.

closes odoo/odoo#134242

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../src/views/fields/relational_utils.xml     |  1 +
 .../static/tests/core/autocomplete_tests.js   | 43 ++++++++++++++
 .../many2many_tags_avatar_field_tests.js      | 56 +++++++++++++++++++
 3 files changed, 100 insertions(+)

diff --git a/addons/web/static/src/views/fields/relational_utils.xml b/addons/web/static/src/views/fields/relational_utils.xml
index 643ed852894..c654691a21b 100644
--- a/addons/web/static/src/views/fields/relational_utils.xml
+++ b/addons/web/static/src/views/fields/relational_utils.xml
@@ -57,6 +57,7 @@
             onChange.bind="onChange"
             dropdown="props.dropdown"
             autofocus="props.autofocus"
+            resetOnSelect="props.value === ''"
         />
         <span class="o_dropdown_button" />
     </div>
diff --git a/addons/web/static/tests/core/autocomplete_tests.js b/addons/web/static/tests/core/autocomplete_tests.js
index 06a77b78d42..75ee1e0f326 100644
--- a/addons/web/static/tests/core/autocomplete_tests.js
+++ b/addons/web/static/tests/core/autocomplete_tests.js
@@ -103,6 +103,49 @@ QUnit.module("Components", (hooks) => {
         assert.verifySteps(["Hello"]);
     });
 
+    QUnit.test("autocomplete with resetOnSelect='true'", async (assert) => {
+        class Parent extends Component {
+            setup() {
+                this.state = useState({
+                    value: "Hello",
+                });
+            }
+            get sources() {
+                return [
+                    {
+                        options: [{ label: "World" }, { label: "Hello" }],
+                    },
+                ];
+            }
+            onSelect(option) {
+                this.state.value = option.label;
+                assert.step(option.label);
+            }
+        }
+        Parent.components = { AutoComplete };
+        Parent.template = xml`
+            <div>
+                <div class= "test_value" t-esc="state.value"/>
+                <AutoComplete
+                    value="''"
+                    sources="sources"
+                    onSelect="(option) => this.onSelect(option)"
+                    resetOnSelect="true"
+                />
+            </div>
+        `;
+
+        await mount(Parent, target, { env });
+        assert.strictEqual(target.querySelector(".test_value").textContent, "Hello");
+        assert.strictEqual(target.querySelector(".o-autocomplete--input").value, "");
+
+        await editInput(target, ".o-autocomplete--input", "Blip");
+        await click(target.querySelectorAll(".o-autocomplete--dropdown-item")[1]);
+        assert.strictEqual(target.querySelector(".test_value").textContent, "Hello");
+        assert.strictEqual(target.querySelector(".o-autocomplete--input").value, "");
+        assert.verifySteps(["Hello"]);
+    });
+
     QUnit.test("open dropdown on input", async (assert) => {
         class Parent extends Component {}
         Parent.components = { AutoComplete };
diff --git a/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js b/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js
index da265a3dea7..e30517ea403 100644
--- a/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js
+++ b/addons/web/static/tests/views/fields/many2many_tags_avatar_field_tests.js
@@ -3,12 +3,15 @@
 import {
     click,
     clickSave,
+    editInput,
     getFixture,
+    patchWithCleanup,
     selectDropdownItem,
     triggerEvent,
 } from "@web/../tests/helpers/utils";
 import { makeView, setupViewRegistries } from "@web/../tests/views/helpers";
 import { triggerHotkey } from "../../helpers/utils";
+import { browser } from "@web/core/browser/browser";
 
 let serverData;
 let target;
@@ -604,4 +607,57 @@ QUnit.module("Fields", (hooks) => {
             );
         }
     );
+
+    QUnit.test("widget many2many_tags_avatar", async function (assert) {
+        patchWithCleanup(browser, {
+            setTimeout: (fn) => fn(),
+        });
+        await makeView({
+            type: "form",
+            resModel: "turtle",
+            serverData,
+            arch: `
+                <form>
+                    <sheet>
+                        <field name="partner_ids" widget="many2many_tags_avatar"/>
+                    </sheet>
+                </form>`,
+            resId: 1,
+        });
+
+        assert.deepEqual(
+            [...target.querySelectorAll("[name='partner_ids'] .o_tag")].map((el) => el.textContent),
+            []
+        );
+        assert.strictEqual(
+            target.querySelector("[name='partner_ids'] .o_input_dropdown input").value,
+            ""
+        );
+
+        await editInput(target, "[name='partner_ids'] .o_input_dropdown input", "first record");
+        await triggerEvent(target, "[name='partner_ids'] .o_input_dropdown input", "keydown", {
+            key: "Enter",
+        });
+        assert.deepEqual(
+            [...target.querySelectorAll("[name='partner_ids'] .o_tag")].map((el) => el.textContent),
+            ["first record"]
+        );
+        assert.strictEqual(
+            target.querySelector("[name='partner_ids'] .o_input_dropdown input").value,
+            ""
+        );
+
+        await editInput(target, "[name='partner_ids'] .o_input_dropdown input", "abc");
+        await triggerEvent(target, "[name='partner_ids'] .o_input_dropdown input", "keydown", {
+            key: "Enter",
+        });
+        assert.deepEqual(
+            [...target.querySelectorAll("[name='partner_ids'] .o_tag")].map((el) => el.textContent),
+            ["first record", "abc"]
+        );
+        assert.strictEqual(
+            target.querySelector("[name='partner_ids'] .o_input_dropdown input").value,
+            ""
+        );
+    });
 });