From e0ed027211ae8c8e2c9ea9a8944a98f8635b8e58 Mon Sep 17 00:00:00 2001
From: wandji <wbertrand10@gmail.com>
Date: Wed, 13 Sep 2023 14:00:04 +0100
Subject: [PATCH] Fix css issues in manage tags modal [SCI-9168] (#6208)

---
 app/assets/javascripts/my_modules/tags.js       | 17 +++++++++--------
 .../stylesheets/my_modules/protocols/index.scss |  5 -----
 app/views/experiments/canvas.html.erb           |  1 +
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/my_modules/tags.js b/app/assets/javascripts/my_modules/tags.js
index 9fa4056c4..a0a74adb6 100644
--- a/app/assets/javascripts/my_modules/tags.js
+++ b/app/assets/javascripts/my_modules/tags.js
@@ -51,16 +51,17 @@
           editDiv.find('input[type=text]').val(li.data('name'));
           editDiv.find('.edit-tag-color').colorselector('setColor', li.data('color'));
 
+          editDiv.find('.dropdown-colorselector > .dropdown-menu li a')
+            .on('click', function() {
+              // Change background of the <li>
+              const colorSelector = $(this);
+              const colorItem = colorSelector.parents('li.list-group-item');
+              colorItem.css('background-color', colorSelector.data('value'));
+            });
+
           li.find('div.tag-show').hide();
           editDiv.show();
         });
-      manageTagsModalBody.find('div.tag-edit .dropdown-colorselector > .dropdown-menu li a')
-        .on('click', function() {
-          // Change background of the <li>
-          var $this = $(this);
-          var li = $this.parents('li.list-group-item');
-          li.css('background-color', $this.data('value'));
-        });
       manageTagsModalBody.find('.remove-tag-link')
         .on('ajax:success', function(e, data) {
           dropdownSelector.removeValue('#module-tags-selector', this.dataset.tagId, '', true);
@@ -144,7 +145,7 @@
       manageTagsModalBody.html('');
     });
     // initialize my_module tab remote loading
-    $('#experimentTable, .my-modules-protocols-index')
+    $('#experimentTable, .my-modules-protocols-index, #experiment-canvas')
       .on('ajax:before', '.edit-tags-link', function() {
         manageTagsModal.modal('show');
       })
diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index 74268e698..f69a33408 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@@ -418,11 +418,6 @@
 
   .dropdown-menu {
     outline: none;
-
-    li > a:hover,
-    li > a:focus {
-      background-color: $color-concrete;
-    }
   }
 }
 
diff --git a/app/views/experiments/canvas.html.erb b/app/views/experiments/canvas.html.erb
index cef5ebb3c..7e5871fcc 100644
--- a/app/views/experiments/canvas.html.erb
+++ b/app/views/experiments/canvas.html.erb
@@ -66,6 +66,7 @@
 
 <!-- Manage tags modal -->
 <%= render partial: "my_modules/modals/manage_module_tags_modal", locals: { my_module: nil } %>
+<%= javascript_include_tag("my_modules/tags") %>
 
 <!-- Initialize dropdown actions -->
 <%= javascript_include_tag("experiments/dropdown_actions") %>