From 39fd43aff05827907145fde4da49f49e2e4491b3 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 14 Oct 2022 17:53:28 +0300
Subject: [PATCH] fix clicking twice outside context menu to hide

---
 src/components/ContextMenu.vue     |  2 ++
 src/components/shared/SongItem.vue | 15 +++++++++------
 src/composables/context.ts         |  7 +++++++
 src/stores/context.ts              |  2 +-
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/ContextMenu.vue b/src/components/ContextMenu.vue
index 82a1c552..5f5d4062 100644
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -44,6 +44,8 @@ onClickOutside(contextMenu, (e) => {
     e.stopImmediatePropagation();
     clickCount = 0;
   }
+}, {
+  capture: false
 });
 </script>
 
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 9f2632b4..83ff2b7b 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="songlist-item rounded-sm"
-    :class="[{ current: isCurrent }, { contexton: context_on }]"
+    :class="[{ current: isCurrent }, { contexton: context_menu_showing }]"
     @dblclick.prevent="emitUpdate"
     @contextmenu.prevent="showMenu"
   >
@@ -51,7 +51,6 @@
     <div class="song-duration">{{ formatSeconds(track.duration) }}</div>
     <div
       class="options-icon circular"
-      :class="{ 'btn-active': options_button_clicked }"
       @click.stop="showMenu"
       @dblclick.stop="() => {}"
     >
@@ -74,7 +73,7 @@ import ArtistName from "./ArtistName.vue";
 
 const context_on = ref(false);
 const imguri = paths.images.thumb.small;
-const options_button_clicked = ref(false);
+const context_menu_showing = ref(false);
 
 const artisttitle = ref<HTMLElement | null>(null);
 
@@ -95,7 +94,7 @@ function emitUpdate() {
 }
 
 function showMenu(e: MouseEvent) {
-  showContext(e, props.track, options_button_clicked);
+  showContext(e, props.track, context_menu_showing);
 }
 </script>
 
@@ -191,8 +190,8 @@ function showMenu(e: MouseEvent) {
     }
   }
 
-  .options_button_clicked {
-    background-color: $gray5;
+  .context_menu_showing {
+    background-color: $gray4;
     opacity: 1;
   }
 
@@ -235,4 +234,8 @@ function showMenu(e: MouseEvent) {
 .songlist-item.current {
   background-color: $gray;
 }
+
+.songlist-item.contexton {
+  background-color: $gray;
+}
 </style>
diff --git a/src/composables/context.ts b/src/composables/context.ts
index 16e8669b..30ad3dd1 100644
--- a/src/composables/context.ts
+++ b/src/composables/context.ts
@@ -8,6 +8,12 @@ import { ContextSrc } from "./enums";
 import { Track } from "@/interfaces";
 import trackContext from "@/contexts/track_context";
 
+/**
+ * Handles showing the context menu for a track component.
+ * @param e The MouseEvent for positioning the context menu
+ * @param track The track to link to the context menu
+ * @param flag The boolean that manages the context visibility in the source component
+ */
 export const showTrackContextMenu = (
   e: MouseEvent,
   track: Track,
@@ -20,6 +26,7 @@ export const showTrackContextMenu = (
   menu.showContextMenu(e, options, ContextSrc.Track);
   flag.value = true;
 
+  // watch for context menu visibility and reset flag
   menu.$subscribe((mutation, state) => {
     if (!state.visible) {
       flag.value = false;
diff --git a/src/stores/context.ts b/src/stores/context.ts
index 23af555e..c08a86c3 100644
--- a/src/stores/context.ts
+++ b/src/stores/context.ts
@@ -18,7 +18,7 @@ export default defineStore("context-menu", {
   state: () => ({
     visible: false,
     options: {} as Option[],
-    src: <null | string>"",
+    src: <null | ContextSrc>"",
     elem: <HTMLElement | null>null,
   }),
   actions: {