From c0583343bf54cd23b30778586bc48a3a026c6498 Mon Sep 17 00:00:00 2001
From: Andrej <andrej.jugovic7@gmail.com>
Date: Fri, 22 Dec 2023 08:21:37 +0100
Subject: [PATCH] Fix repository item sidebar click away [SCI-9904]

---
 .../RepositoryItemSidebar.vue                 | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
index 6fa3c3884..7ad37b94c 100644
--- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
+++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
@@ -2,7 +2,8 @@
   <transition enter-from-class="translate-x-full w-0"
               enter-active-class="transition-all ease-sharp duration-[588ms]"
               leave-active-class="transition-all ease-sharp duration-[588ms]"
-              leave-to-class="translate-x-full w-0">
+              leave-to-class="translate-x-full w-0"
+              v-click-outside="handleOutsideClick">
     <div ref="wrapper" v-show="isShowing" id="repository-item-sidebar-wrapper"
       class='items-sidebar-wrapper bg-white gap-2.5 self-stretch rounded-tl-4 rounded-bl-4 shadow-lg h-full w-[565px]'>
 
@@ -247,6 +248,7 @@
 </template>
 
 <script>
+import { vOnClickOutside } from '@vueuse/components';
 import InlineEdit from '../shared/inline_edit.vue';
 import ScrollSpy from './repository_values/ScrollSpy.vue';
 import CustomColumns from './customColumns.vue';
@@ -260,6 +262,9 @@ export default {
     'inline-edit': InlineEdit,
     'scroll-spy': ScrollSpy,
   },
+  directives: {
+    'click-outside': vOnClickOutside
+  },
   data() {
     return {
       currentItemUrl: null,
@@ -294,22 +299,23 @@ export default {
   },
   mounted() {
     // Add a click event listener to the document
-    document.addEventListener('mousedown', this.handleOutsideClick);
     this.inRepository = $('.assign-items-to-task-modal-container').length > 0;
   },
   beforeUnmount() {
     delete window.repositoryItemSidebarComponent;
-    document.removeEventListener('mousedown', this.handleOutsideClick);
   },
   methods: {
     handleOutsideClick(event) {
-      if (!this.isShowing) return
+      if (!this.isShowing) return;
 
-      // Check if the clicked element is not within the sidebar and it's not another item link or belogs to modals
-      const selectors = ['a', '.modal', '.label-printing-progress-modal', '.atwho-view'];
+      const allowedSelectors = ['a', '.modal', '.label-printing-progress-modal', '.atwho-view'];
+      const excludeSelectors = ['#myModuleRepositoryFullViewModal'];
 
-      if (!$(event.target).parents('#repository-item-sidebar-wrapper').length &&
-        !selectors.some(selector => event.target.closest(selector))) {
+      const isOutsideSidebar = !$(event.target).parents('#repository-item-sidebar-wrapper').length;
+      const isAllowedClick = !allowedSelectors.some((selector) => event.target.closest(selector));
+      const isExcludedClick = excludeSelectors.some((selector) => event.target.closest(selector));
+
+      if (isOutsideSidebar && (isAllowedClick || isExcludedClick)) {
         this.toggleShowHideSidebar(null);
       }
     },