From 88e75fd5cd116f664c57b810529a4774925484ea Mon Sep 17 00:00:00 2001
From: mano-odoo <mano@odoo.com>
Date: Fri, 13 Oct 2023 12:00:57 +0200
Subject: [PATCH] [FIX] web: taglist hide avatar overlay in readonly

The avatars coming from the TagsList component could not differentiate
if the `Many2ManyTagsAvatarField` was in readonly. Displaying an hover
state style when in list view.

This commit checks if the tag.onDelete is defined to render the span
containing the hover effect.

task-3514404

closes odoo/odoo#139455

X-original-commit: ac1757d96ab9ddda934b9b49ad41d83c9567e5b8
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../static/src/core/tags_list/tags_list.xml   |  2 +-
 .../web/static/tests/core/tags_list_tests.js  | 28 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/core/tags_list/tags_list.xml b/addons/web/static/src/core/tags_list/tags_list.xml
index 437e024cfb7..931ba40dd12 100644
--- a/addons/web/static/src/core/tags_list/tags_list.xml
+++ b/addons/web/static/src/core/tags_list/tags_list.xml
@@ -18,7 +18,7 @@
 
                 <!-- Avatar's :hover backdrop -->
                 <span
-                    t-if="tag.img &amp;&amp; props.displayText"
+                    t-if="tag.img and props.displayText and tag.onDelete"
                     class="o_avatar_backdrop position-absolute top-0 end-0 bottom-0 start-0 ms-n2 mt-n1 mb-n1 bg-view rounded border shadow opacity-0 opacity-100-hover"/>
 
                 <img
diff --git a/addons/web/static/tests/core/tags_list_tests.js b/addons/web/static/tests/core/tags_list_tests.js
index 383768b02bd..5cf45215528 100644
--- a/addons/web/static/tests/core/tags_list_tests.js
+++ b/addons/web/static/tests/core/tags_list_tests.js
@@ -179,4 +179,32 @@ QUnit.module("Web Components", (hooks) => {
             "the counter has a tooltip displaying other items"
         );
     });
+
+    QUnit.test("Tags with img have a backdrop only if they can be deleted", async (assert) => {
+        class Parent extends Component {
+            setup() {
+                this.tags = [
+                    {
+                        id: "tag1",
+                        text: "Earth",
+                        img: "fake/url",
+                    },
+                    {
+                        colorIndex: 1,
+                        id: "tag2",
+                        text: "Wind",
+                        img: "fake/url",
+                        onDelete: () => {},
+                    },
+                ];
+            }
+        }
+        Parent.components = { TagsList };
+        Parent.template = xml`<TagsList tags="tags" />`;
+
+        await mount(Parent, target, { env });
+        assert.containsN(target, ".o_tag", 2);
+        assert.containsNone(target.querySelectorAll(".o_tag")[0], ".o_avatar_backdrop");
+        assert.containsOnce(target.querySelectorAll(".o_tag")[1], ".o_avatar_backdrop");
+    });
 });