fix clicking twice outside context menu to hide

src/components/ContextMenu.vue

@@ -44,6 +44,8 @@ onClickOutside(contextMenu, (e) => {
     e.stopImmediatePropagation();
     clickCount = 0;
   }
+}, {
+  capture: false
 });
 </script>
 

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 {
+  .context_menu_showing {
-    background-color: $gray5;
+    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>

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;

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: {