From 0fd48e3b18a0f862c60d7b1f415422944d040ceb Mon Sep 17 00:00:00 2001
From: Kevin Frei <kevinfrei@hotmail.com>
Date: Thu, 28 Dec 2023 18:24:54 -0800
Subject: [PATCH] Cleaned up the SongContextMenu a little bit (just a little).
 Bug appears gone?

---
 src/UI/SongMenus.tsx     | 15 +++++++++------
 src/UI/Views/Albums.tsx  | 22 ++++++++++------------
 src/UI/Views/Artists.tsx |  5 ++---
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/UI/SongMenus.tsx b/src/UI/SongMenus.tsx
index aa291556..7613b6ff 100644
--- a/src/UI/SongMenus.tsx
+++ b/src/UI/SongMenus.tsx
@@ -24,7 +24,7 @@ import { AddSongs, PlaySongs } from '../Recoil/api';
 import { SongListDetailClick } from './DetailPanel/Clickers';
 import { ErrorBoundary } from './Utilities';
 
-export type SongListMenuData = { data: string; spot: Point };
+export type SongListMenuData = { data: string; spot?: Point };
 
 type SongListMenuArgs = {
   title?: string;
@@ -109,7 +109,9 @@ export function SongListMenu({
   const likeNum = useRecoilValue(songLikeNumFromStringFuncFam(context.data));
   const likeIcons = ['Like', 'LikeSolid', 'Like', 'More'];
   const hateIcons = ['Dislike', 'Dislike', 'DislikeSolid', 'More'];
-
+  if (context.data === '' || context.spot === undefined) {
+    return <></>;
+  }
   const realItems: IContextualMenuItem[] = title
     ? [{ key: 'Header', name: title, itemType: ContextualMenuItemType.Header }]
     : [];
@@ -162,14 +164,14 @@ export function SongListMenu({
       realItems.push(itm);
     }
   }
-
   return (
     <ErrorBoundary>
       <ContextualMenu
-        directionalHint={DirectionalHint.bottomRightEdge}
+        directionalHint={DirectionalHint.bottomCenter}
         isBeakVisible={true}
-        hidden={context.data === ''}
         items={realItems}
+        shouldFocusOnMount={true}
+        shouldFocusOnContainer={true}
         target={context.spot}
         onDismiss={(ev) => {
           // The DetailsList panel wiggles. A lot.
@@ -179,7 +181,8 @@ export function SongListMenu({
             onClearContext();
           }
         }}
-        styles={{ container: { margin: 0, padding: 0, fontSize: 'small' } }}
+        // Hide the scroll bar on the menu
+        styles={{ container: { overflow: 'hidden' } }}
       />
     </ErrorBoundary>
   );
diff --git a/src/UI/Views/Albums.tsx b/src/UI/Views/Albums.tsx
index e010c479..5562eb00 100644
--- a/src/UI/Views/Albums.tsx
+++ b/src/UI/Views/Albums.tsx
@@ -10,6 +10,7 @@ import {
   SelectionMode,
   Text,
 } from '@fluentui/react';
+import { CurrentView } from '@freik/emp-shared';
 import { AlbumKey, Song } from '@freik/media-core';
 import { hasFieldType, isDefined, isNumber } from '@freik/typechk';
 import {
@@ -24,7 +25,6 @@ import {
   useRecoilValue,
   useResetRecoilState,
 } from 'recoil';
-import { CurrentView } from '@freik/emp-shared';
 import { AddSongs, SongListFromKey } from '../../Recoil/api';
 import { albumCoverUrlFuncFam } from '../../Recoil/ImageUrls';
 import { focusedKeysFuncFam } from '../../Recoil/KeyBuffer';
@@ -88,15 +88,15 @@ function AlbumHeaderDisplay({ group }: AHDProps): JSX.Element {
   );
   const onRightClick = useMyTransaction(
     ({ set }) =>
-      (event: React.MouseEvent<HTMLElement, MouseEvent>) =>
-        set(albumContextState, {
-          data: group.key,
-          spot: { left: event.clientX + 14, top: event.clientY },
-        }),
+      (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+        const data = group.key;
+        const spot = { left: event.clientX + 14, top: event.clientY };
+        set(albumContextState, { data, spot });
+      },
   );
 
   return (
-    <div className="album-header">
+    <div className="album-header" onContextMenu={onRightClick}>
       <IconButton
         iconProps={{
           iconName: group.isCollapsed ? 'ChevronRight' : 'ChevronDown',
@@ -106,7 +106,6 @@ function AlbumHeaderDisplay({ group }: AHDProps): JSX.Element {
       <div
         className="album-header-info"
         onDoubleClick={onAddSongsClick}
-        onContextMenu={onRightClick}
         style={{ padding: '2px 0px', cursor: 'pointer' }}
       >
         <Image
@@ -153,10 +152,9 @@ export function GroupedAlbumList(): JSX.Element {
           hasFieldType(ev, 'clientX', isNumber) &&
           hasFieldType(ev, 'clientY', isNumber)
         ) {
-          set(albumContextState, {
-            data: item.key,
-            spot: { left: ev.clientX + 14, top: ev.clientY },
-          });
+          const data = item.key;
+          const spot = { left: ev.clientX + 14, top: ev.clientY };
+          set(albumContextState, { data, spot });
         }
       },
   );
diff --git a/src/UI/Views/Artists.tsx b/src/UI/Views/Artists.tsx
index dcfcbe42..90ed9ba5 100644
--- a/src/UI/Views/Artists.tsx
+++ b/src/UI/Views/Artists.tsx
@@ -10,6 +10,7 @@ import {
   SelectionMode,
   Text,
 } from '@fluentui/react';
+import { CurrentView } from '@freik/emp-shared';
 import { Album, AlbumKey, Artist, ArtistKey } from '@freik/media-core';
 import {
   MakeSetState,
@@ -23,7 +24,6 @@ import {
   useRecoilValue,
   useResetRecoilState,
 } from 'recoil';
-import { CurrentView } from '@freik/emp-shared';
 import { AddSongs, SongListFromKey } from '../../Recoil/api';
 import { artistImageUrlFuncFam } from '../../Recoil/ImageUrls';
 import { focusedKeysFuncFam } from '../../Recoil/KeyBuffer';
@@ -92,7 +92,7 @@ function ArtistHeaderDisplay({ group }: { group: IGroup }): JSX.Element {
   );
   const songCount = artist.songs.length;
   return (
-    <div className="artist-header">
+    <div className="artist-header" onContextMenu={onRightClick}>
       <IconButton
         iconProps={{
           iconName: group.isCollapsed ? 'ChevronRight' : 'ChevronDown',
@@ -102,7 +102,6 @@ function ArtistHeaderDisplay({ group }: { group: IGroup }): JSX.Element {
       <div
         className="artist-header-info"
         onDoubleClick={onAddSongsClick}
-        onContextMenu={onRightClick}
         style={{ padding: '2px 0px', cursor: 'pointer' }}
       >
         <Image