From 23edac59ec33c9a4e6d48c4ebd9f7412cbaef42f Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Fri, 11 Apr 2025 11:28:25 +0200
Subject: [PATCH] Fix dropdown menus not working on mobile (#34428)

---
 .../mastodon/components/dropdown_menu.tsx     | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/app/javascript/mastodon/components/dropdown_menu.tsx b/app/javascript/mastodon/components/dropdown_menu.tsx
index a5d2deaae1..fc3e9e1321 100644
--- a/app/javascript/mastodon/components/dropdown_menu.tsx
+++ b/app/javascript/mastodon/components/dropdown_menu.tsx
@@ -354,6 +354,28 @@ export const Dropdown = <Item = MenuItem,>({
     dispatch(closeDropdownMenu({ id: currentId }));
   }, [dispatch, currentId]);
 
+  const handleItemClick = useCallback(
+    (e: React.MouseEvent | React.KeyboardEvent) => {
+      const i = Number(e.currentTarget.getAttribute('data-index'));
+      const item = items?.[i];
+
+      handleClose();
+
+      if (!item) {
+        return;
+      }
+
+      if (typeof onItemClick === 'function') {
+        e.preventDefault();
+        onItemClick(item, i);
+      } else if (isActionItem(item)) {
+        e.preventDefault();
+        item.action();
+      }
+    },
+    [handleClose, onItemClick, items],
+  );
+
   const handleClick = useCallback(
     (e: React.MouseEvent | React.KeyboardEvent) => {
       const { type } = e;
@@ -374,7 +396,7 @@ export const Dropdown = <Item = MenuItem,>({
               modalProps: {
                 status,
                 actions: items,
-                onClick: onItemClick,
+                onClick: handleItemClick,
               },
             }),
           );
@@ -394,7 +416,7 @@ export const Dropdown = <Item = MenuItem,>({
       currentId,
       scrollKey,
       onOpen,
-      onItemClick,
+      handleItemClick,
       open,
       status,
       items,
@@ -434,28 +456,6 @@ export const Dropdown = <Item = MenuItem,>({
     [handleClick],
   );
 
-  const handleItemClick = useCallback(
-    (e: React.MouseEvent | React.KeyboardEvent) => {
-      const i = Number(e.currentTarget.getAttribute('data-index'));
-      const item = items?.[i];
-
-      handleClose();
-
-      if (!item) {
-        return;
-      }
-
-      if (typeof onItemClick === 'function') {
-        e.preventDefault();
-        onItemClick(item, i);
-      } else if (isActionItem(item)) {
-        e.preventDefault();
-        item.action();
-      }
-    },
-    [handleClose, onItemClick, items],
-  );
-
   useEffect(() => {
     return () => {
       if (currentId === openDropdownId) {