From a46c78a99118648422d9cfd7887c5b10d29948ba Mon Sep 17 00:00:00 2001
From: Ivy Grey <igrey@duckduckgo.com>
Date: Thu, 30 Jan 2025 11:03:42 -0800
Subject: [PATCH] Do not also handle right clicks

---
 .../pages/new-tab/app/activity/components/Activity.js    | 9 ++++-----
 .../pages/new-tab/app/favorites/components/Favorites.js  | 5 ++---
 special-pages/pages/new-tab/app/utils.js                 | 8 ++++----
 3 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/special-pages/pages/new-tab/app/activity/components/Activity.js b/special-pages/pages/new-tab/app/activity/components/Activity.js
index e0fe44065..5f94c9d63 100644
--- a/special-pages/pages/new-tab/app/activity/components/Activity.js
+++ b/special-pages/pages/new-tab/app/activity/components/Activity.js
@@ -5,7 +5,7 @@ import { memo } from 'preact/compat';
 import { ActivityApiContext, ActivityContext, ActivityProvider, SignalStateContext, SignalStateProvider } from '../ActivityProvider.js';
 import { useTypedTranslationWith } from '../../types.js';
 import { useVisibility } from '../../widget-list/widget-config.provider.js';
-import { useAuxClick, useDocumentVisibility } from '../../utils.js';
+import { useOnMiddleClick, useDocumentVisibility } from '../../utils.js';
 import { useCustomizer } from '../../customizer/components/CustomizerMenu.js';
 import { usePlatformName } from '../../settings.provider.js';
 import { ActivityHeading } from '../../privacy-stats/components/PrivacyStats.js';
@@ -78,9 +78,8 @@ function ActivityConfigured({ expansion, toggle }) {
 function ActivityBody({ canBurn }) {
     const { didClick } = useContext(ActivityApiContext);
     
-    // handle middle clicks (preact doesn't seem to support `onAuxClick` out of the box)
-    const auxClickRef = useRef(/** @type {HTMLUListElement|null} */ (null));
-    useAuxClick(auxClickRef, didClick);
+    const ref = useRef(/** @type {HTMLUListElement|null} */ (null));
+    useOnMiddleClick(ref, didClick);
 
     const documentVisibility = useDocumentVisibility();
     const { isReducedMotion } = useEnv();
@@ -90,7 +89,7 @@ function ActivityBody({ canBurn }) {
 
     return (
         <Fragment>
-            <ul class={styles.activity} ref={auxClickRef} onClick={didClick} data-busy={busy}>
+            <ul class={styles.activity} ref={ref} onClick={didClick} data-busy={busy}>
                 {keys.value.available.map((id, index) => {
                     if (canBurn && !isReducedMotion) return <BurnableItem id={id} key={id} documentVisibility={documentVisibility} />;
                     return <RemovableItem id={id} key={id} canBurn={canBurn} documentVisibility={documentVisibility} />;
diff --git a/special-pages/pages/new-tab/app/favorites/components/Favorites.js b/special-pages/pages/new-tab/app/favorites/components/Favorites.js
index 883510767..b539a11c3 100644
--- a/special-pages/pages/new-tab/app/favorites/components/Favorites.js
+++ b/special-pages/pages/new-tab/app/favorites/components/Favorites.js
@@ -12,7 +12,7 @@ import { TileRow } from './TileRow.js';
 import { FavoritesContext } from './FavoritesProvider.js';
 import { CustomizerContext, CustomizerThemesContext } from '../../customizer/CustomizerProvider.js';
 import { signal, useComputed } from '@preact/signals';
-import { eventToTarget, useAuxClick, useDocumentVisibility } from '../../utils.js';
+import { eventToTarget, useOnMiddleClick, useDocumentVisibility } from '../../utils.js';
 
 /**
  * @typedef {import('../../../types/new-tab.js').Expansion} Expansion
@@ -153,9 +153,8 @@ function VirtualizedGridRows({ WIDGET_ID, rowHeight, favorites, expansion, openF
         ? rowHeight
         : rows.length * rowHeight;
 
-    // handle middle clicks (preact doesn't seem to support `onAuxClick` out of the box)
     const clickHandler = getOnClickHandler(openFavorite, platformName);
-    useAuxClick(safeAreaRef, clickHandler);
+    useOnMiddleClick(safeAreaRef, clickHandler);
 
     return (
         <div
diff --git a/special-pages/pages/new-tab/app/utils.js b/special-pages/pages/new-tab/app/utils.js
index 52a6f2ac7..bdc46a115 100644
--- a/special-pages/pages/new-tab/app/utils.js
+++ b/special-pages/pages/new-tab/app/utils.js
@@ -97,16 +97,16 @@ export function useDocumentVisibility() {
 }
 
 /**
- * Custom hook to handle auxclick event on an element.
+ * Custom hook to handle middle click event on an element. This is required because Preact doens't support the auxclick event.
  * @param {import('preact').RefObject<HTMLElement>} ref - The ref of the element to attach the event listener to.
- * @param {Function} handler - The function to execute on auxclick event.
+ * @param {Function} handler - The function to execute on the middle click event.
  */
-export function useAuxClick(ref, handler) {
+export function useOnMiddleClick(ref, handler) {
     useEffect(() => {
         const element = ref.current;
         if (!element) return;
 
-        const handleAuxClick = (event) => handler(event);
+        const handleAuxClick = (event) => event.button === 1 /* middle button */ && handler(event);
 
         element.addEventListener('auxclick', handleAuxClick);