[FIX] web: Missing trash icon from custom filters

This commit fixes an issue where the trash icon was not properly
shown in the dropdown when adding more custom filters.
A test has been written to verify if the download button is
present in the dropdown.

task-2716032

closes odoo/odoo#81871

X-original-commit: af566b663f42479ade2d4b4b01d052215be85c1e
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Luca Vitali <luvi@odoo.com>

addons/web/static/src/search/filter_menu/custom_filter_item.xml

@@ -7,7 +7,7 @@
                 Add Custom Filter
             </t>
             <t t-foreach="conditions" t-as="condition" t-key="condition_index">
-                <div class=" o_filter_condition dropdown-item-text">
+                <div class=" o_filter_condition dropdown-item-text position-relative">
                     <t t-set="fieldType" t-value="fields[condition.field].type"/>
                     <t t-set="selectedOperator" t-value="OPERATORS[FIELD_TYPES[fieldType]][condition.operator]"/>
                     <span t-if="!condition_first" class="o_or_filter">or</span>

addons/web/static/src/search/search_panel/search_view.scss

@@ -89,7 +89,7 @@
         }
 
         .o_or_filter {
-            @include o-position-absolute($left: $dropdown-item-padding-x*.5);
+            @include o-position-absolute($left: $dropdown-item-padding-x*.2);
         }
 
         .o_generator_menu_value {
@@ -102,16 +102,10 @@
         }
 
         .o_generator_menu_delete {
-            @include o-hover-opacity;
-
-            &:before {
-                @include o-position-absolute(0, 0, 0, 0);
-                pointer-events: none;
-                z-index: -1;
-                content: "";
-            }
-
-            &:hover:before {
+            @include o-hover-opacity(0.8, 1);
+            @include o-position-absolute($dropdown-item-padding-x*.3, $dropdown-item-padding-x*.2, auto, auto);
+            
+            &:hover {
                 background-color: gray('100');
             }
         }

addons/web/static/tests/search/custom_filter_item_tests.js

@@ -687,4 +687,37 @@ QUnit.module("Search", (hooks) => {
             ["id", "=", 9],
         ]);
     });
+
+    QUnit.test("delete button is visible", async function (assert) {
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+        });
+
+        await toggleFilterMenu(controlPanel);
+        await toggleAddCustomFilter(controlPanel);
+
+        assert.containsNone(
+            controlPanel,
+            ".o_generator_menu_delete",
+            "There is no delete button by default"
+        );
+
+        await addCondition(controlPanel);
+        assert.containsN(
+            controlPanel,
+            ".o_generator_menu_delete",
+            2,
+            "A delete button has been added to each condition"
+        );
+        assert.containsN(
+            controlPanel,
+            "i.o_generator_menu_delete.fa-trash-o",
+            2,
+            "The delete button is shown as a trash icon"
+        );
+    });
 });