Cleaned up the SongContextMenu a little bit (just a little). Bug appears gone?

Author: kevinfrei

package.json

@@ -105,6 +105,7 @@
     "react-scripts": "^5.0.1",
     "react-test-renderer": "^17.0.2",
     "svg-react-loader": "^0.4.6",
+    "tree-kill": "^1.2.2",
     "ts-jest": "29.1.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.10",

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>
   );

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 });
         }
       },
   );

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

yarn.lock

@@ -12358,6 +12358,7 @@ __metadata:
     recoil: "npm:^0.7.7"
     rimraf: "npm:^5.0.5"
     svg-react-loader: "npm:^0.4.6"
+    tree-kill: "npm:^1.2.2"
     ts-jest: "npm:29.1.1"
     typescript: "npm:^5.3.3"
     vite: "npm:^5.0.10"
@@ -23831,6 +23832,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tree-kill@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "tree-kill@npm:1.2.2"
+  bin:
+    tree-kill: cli.js
+  checksum: 49117f5f410d19c84b0464d29afb9642c863bc5ba40fcb9a245d474c6d5cc64d1b177a6e6713129eb346b40aebb9d4631d967517f9fbe8251c35b21b13cd96c7
+  languageName: node
+  linkType: hard
+
 "trim-newlines@npm:^2.0.0":
   version: 2.0.0
   resolution: "trim-newlines@npm:2.0.0"