From 0ea61f26eb8eba2ae4885a6c8fc0400649159931 Mon Sep 17 00:00:00 2001
From: Henry Heino <46334387+personalizedrefrigerator@users.noreply.github.com>
Date: Fri, 11 Oct 2024 14:07:56 -0700
Subject: [PATCH] Desktop: Accessibility: Fix context menu button doesn't open
 the note list context menu (regression) (#11175)

---
 .../app-desktop/gui/NoteList/NoteList2.tsx     |  9 ++++++++-
 .../gui/NoteListItem/utils/useOnContextMenu.ts | 18 +++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/app-desktop/gui/NoteList/NoteList2.tsx b/packages/app-desktop/gui/NoteList/NoteList2.tsx
index 5a5027657..7c47bb255 100644
--- a/packages/app-desktop/gui/NoteList/NoteList2.tsx
+++ b/packages/app-desktop/gui/NoteList/NoteList2.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMemo, useRef, useEffect } from 'react';
+import { useMemo, useRef, useEffect, useCallback } from 'react';
 import { AppState } from '../../app.reducer';
 import BaseModel, { ModelType } from '@joplin/lib/BaseModel';
 import { Props } from './utils/types';
@@ -275,6 +275,12 @@ const NoteList = (props: Props) => {
 		return output;
 	}, [listRenderer.flow]);
 
+	const onContainerContextMenu = useCallback((event: React.MouseEvent) => {
+		const isFromKeyboard = event.button === -1;
+		if (event.isDefaultPrevented() || !isFromKeyboard) return;
+		onItemContextMenu({ itemId: activeNoteId });
+	}, [onItemContextMenu, activeNoteId]);
+
 	return (
 		<div
 			role='listbox'
@@ -293,6 +299,7 @@ const NoteList = (props: Props) => {
 			onKeyDown={onKeyDown}
 			onKeyUp={onKeyUp}
 			onDrop={onDrop}
+			onContextMenu={onContainerContextMenu}
 		>
 			{renderEmptyList()}
 			{renderFiller('top', topFillerStyle)}
diff --git a/packages/app-desktop/gui/NoteListItem/utils/useOnContextMenu.ts b/packages/app-desktop/gui/NoteListItem/utils/useOnContextMenu.ts
index 84d9820d0..1579e2a67 100644
--- a/packages/app-desktop/gui/NoteListItem/utils/useOnContextMenu.ts
+++ b/packages/app-desktop/gui/NoteListItem/utils/useOnContextMenu.ts
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import Folder from '@joplin/lib/models/Folder';
 import { NoteEntity } from '@joplin/lib/services/database/types';
 import { PluginStates } from '@joplin/lib/services/plugins/reducer';
@@ -6,6 +7,13 @@ import { Dispatch } from 'redux';
 import bridge from '../../../services/bridge';
 import NoteListUtils from '../../utils/NoteListUtils';
 
+interface CustomContextMenuEvent {
+	itemId: string;
+	currentTarget?: undefined;
+	preventDefault?: undefined;
+}
+type ContextMenuEvent = React.MouseEvent|CustomContextMenuEvent;
+
 const useOnContextMenu = (
 	selectedNoteIds: string[],
 	selectedFolderId: string,
@@ -15,10 +23,14 @@ const useOnContextMenu = (
 	plugins: PluginStates,
 	customCss: string,
 ) => {
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Old code before rule was applied
-	return useCallback((event: any) => {
-		const currentNoteId = event.currentTarget.getAttribute('data-id');
+	return useCallback((event: ContextMenuEvent) => {
+		let currentNoteId = event.currentTarget?.getAttribute('data-id');
+		if ('itemId' in event) {
+			currentNoteId = event.itemId;
+		}
+
 		if (!currentNoteId) return;
+		event.preventDefault?.();
 
 		let noteIds = [];
 		if (selectedNoteIds.indexOf(currentNoteId) < 0) {