From ff4ac9075b73255152bae5a6cfe9dc1d8e1ff79b Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Thu, 23 Dec 2021 10:06:40 +0000
Subject: [PATCH] [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>
---
 .../search/filter_menu/custom_filter_item.xml |  2 +-
 .../src/search/search_panel/search_view.scss  | 16 +++------
 .../tests/search/custom_filter_item_tests.js  | 33 +++++++++++++++++++
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/addons/web/static/src/search/filter_menu/custom_filter_item.xml b/addons/web/static/src/search/filter_menu/custom_filter_item.xml
index a9486e26328..25c3255cbed 100644
--- a/addons/web/static/src/search/filter_menu/custom_filter_item.xml
+++ b/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>
diff --git a/addons/web/static/src/search/search_panel/search_view.scss b/addons/web/static/src/search/search_panel/search_view.scss
index 77cb693bb2e..f6cf86a3b23 100644
--- a/addons/web/static/src/search/search_panel/search_view.scss
+++ b/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');
             }
         }
diff --git a/addons/web/static/tests/search/custom_filter_item_tests.js b/addons/web/static/tests/search/custom_filter_item_tests.js
index c6e2890c1b5..4fe539271f0 100644
--- a/addons/web/static/tests/search/custom_filter_item_tests.js
+++ b/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"
+        );
+    });
 });