[FW][FIX] web: many2many_tags: no crash when quickly remove tags

addons/web/static/src/views/fields/many2many_tags/many2many_tags_field.js

@@ -10,6 +10,7 @@ import {
     useOpenMany2XRecord,
 } from "@web/views/fields/relational_utils";
 import { registry } from "@web/core/registry";
+import { Mutex } from "@web/core/utils/concurrency";
 import { standardFieldProps } from "../standard_field_props";
 import { TagsList } from "@web/core/tags_list/tags_list";
 import { usePopover } from "@web/core/popover/popover_hook";
@@ -76,6 +77,8 @@ export class Many2ManyTagsField extends Component {
             this.deleteTagByIndex.bind(this)
         );
         this.autoCompleteRef = useRef("autoComplete");
+        this.mutex = new Mutex();
+
         const { saveRecord, removeRecord } = useX2ManyCrud(
             () => this.props.record.data[this.props.name],
             true
@@ -168,8 +171,11 @@ export class Many2ManyTagsField extends Component {
     }
 
     async deleteTagByIndex(index) {
-        const { id } = this.tags[index] || {};
-        this.deleteTag(id);
+        this.mutex.exec(() => {
+            if (this.tags[index]) {
+                return this.deleteTag(this.tags[index].id);
+            }
+        });
     }
 
     async deleteTag(id) {

addons/web/static/tests/views/fields/many2many_tags_field.test.js

@@ -1998,3 +1998,33 @@ test("Many2ManyTagsField placeholder should be empty on mobile", async () => {
     });
     expect("#timmy_0").not.toHaveAttribute("placeholder");
 });
+
+test.tags("desktop");
+test("Many2ManyTagsField: press backspace multiple times to remove tag", async () => {
+    Partner._records[0].timmy = [12, 14];
+    Partner._fields.timmy.onChange = () => {};
+
+    const def = new Deferred();
+    onRpc("onchange", ({ args }) => {
+        expect.step(`onchange ${JSON.stringify(args[1].timmy)}`);
+    });
+    await mountView({
+        type: "form",
+        resModel: "partner",
+        arch: `
+            <form>
+                <field name="timmy" widget="many2many_tags"/>
+            </form>`,
+        resId: 1,
+    });
+
+    expect(".o_field_many2many_tags .badge").toHaveCount(2);
+
+    await contains(".o_field_many2many_tags .badge:eq(1)").click();
+    press("BackSpace");
+    press("BackSpace");
+    def.resolve();
+    await animationFrame();
+    expect(".o_field_many2many_tags .badge").toHaveCount(1);
+    expect.verifySteps(["onchange [[3,14]]"]);
+});