[IMP] spreadsheet[_dashboard]: delete relation filter values using backspace key

This commit implements the functionality of using backspace key to
delete values in relation filter.

task 3324738

closes odoo/odoo#121513

Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>

addons/spreadsheet/static/src/global_filters/components/records_selector/records_selector.js

@@ -27,6 +27,15 @@ export class RecordsSelector extends Component {
         }));
     }
 
+    onKeydown(ev) {
+        if (this.props.resIds.length === 0) {
+            return;
+        }
+        if (ev.key.toUpperCase() === "BACKSPACE") {
+            this.removeRecord(this.props.resIds[this.props.resIds.length - 1]);
+        }
+    }
+
     searchDomain() {
         return Domain.not([["id", "in", this.props.resIds]]).toList();
     }

addons/spreadsheet/static/src/global_filters/components/records_selector/records_selector.xml

@@ -3,7 +3,9 @@
     <div t-name="spreadsheet.RecordsSelector" class="o_field_widget o_field_many2many_tags" owl="1">
         <div class="o_field_tags d-inline-flex flex-wrap mw-100 o_tags_input o_input">
             <TagsList tags="tags"/>
-            <div class="o_field_many2many_selection d-inline-flex w-100">
+            <div 
+                class="o_field_many2many_selection d-inline-flex w-100"
+                t-on-keydown="onKeydown">
                 <Many2XAutocomplete
                     placeholder="props.placeholder"
                     resModel="props.resModel"

addons/spreadsheet/static/tests/utils/ui.js

@@ -2,7 +2,7 @@
 
 import { Spreadsheet } from "@odoo/o-spreadsheet";
 import { registerCleanup } from "@web/../tests/helpers/cleanup";
-import { getFixture } from "@web/../tests/helpers/utils";
+import { getFixture, nextTick } from "@web/../tests/helpers/utils";
 import { loadJS, templates } from "@web/core/assets";
 
 import { App } from "@odoo/owl";
@@ -48,3 +48,9 @@ function getMenuItem(registry, _path, env) {
     }
     throw new Error(`Menu item not found`);
 }
+
+export async function keyDown(eventArgs) {
+    const ev = new KeyboardEvent("keydown", { bubbles: true, cancelable: true, ...eventArgs });
+    document.activeElement.dispatchEvent(ev);
+    return await nextTick();
+}

addons/spreadsheet_dashboard/static/tests/dashboard/dashboard_action_test.js

@@ -10,6 +10,7 @@ import {
 import { getDashboardServerData } from "../utils/data";
 import { getBasicData, getBasicListArchs } from "@spreadsheet/../tests/utils/data";
 import { createSpreadsheetDashboard } from "../utils/dashboard_action";
+import { keyDown } from "@spreadsheet/../tests/utils/ui";
 
 QUnit.module("spreadsheet_dashboard > Dashboard > Dashboard action");
 
@@ -190,3 +191,28 @@ QUnit.test(
         assert.equal(year.placeholder, "Select year...");
     }
 );
+
+QUnit.test("Can delete record tag in the filter by hitting Backspace", async function (assert) {
+    const spreadsheetData = {
+        globalFilters: [
+            {
+                id: "1",
+                type: "relation",
+                label: "Relation Filter",
+                modelName: "product",
+                defaultValue: [37],
+                automaticDefaultValue: true,
+            },
+        ],
+    };
+    const serverData = getServerData(spreadsheetData);
+    const fixture = getFixture();
+    await createSpreadsheetDashboard({ serverData });
+    const filter = fixture.querySelector(".o_control_panel_actions div.o_field_tags");
+    const autoCompleteInput = filter.querySelector(".o-autocomplete--input.o_input");
+    assert.equal(filter.querySelectorAll(".o_tag").length, 1);
+
+    autoCompleteInput.focus();
+    await keyDown({ key: "Backspace" });
+    assert.equal(filter.querySelectorAll(".o_tag").length, 0);
+});