[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>

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>

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

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,
+            ""
+        );
+    });
 });