prevent menu if user scrolls

src/components/GlobalTouchMenu.tsx

@@ -24,14 +24,21 @@ const CustomStyledMenu = styled(Menu)(({ theme }) => ({
 
 export const GlobalTouchMenu = () => {
   const [menuOpen, setMenuOpen] = useState(false);
+  const [menuPosition, setMenuPosition] = useState(null);
+  const [lastEnteredGroupId] = useRecoilState(lastEnteredGroupIdAtom);
+
+  // Refs for tap tracking and scroll detection
   const tapCount = useRef(0);
   const lastTapTime = useRef(0);
-    const [menuPosition, setMenuPosition] = useState(null);
+  const touchStartY = useRef(0);
-    const [lastEnteredGroupId] = useRecoilState(lastEnteredGroupIdAtom)
+  const touchMoved = useRef(false);
-
 
   useEffect(() => {
     const handleTouchStart = (event) => {
+      // Reset scroll flag and store the starting Y position
+      touchMoved.current = false;
+      touchStartY.current = event.touches[0].clientY;
+
       const currentTime = new Date().getTime();
       const tapGap = currentTime - lastTapTime.current;
       const { clientX, clientY } = event.touches[0];
@@ -41,23 +48,35 @@ export const GlobalTouchMenu = () => {
       } else {
         tapCount.current = 1; // Reset if too much time has passed
       }
-
       lastTapTime.current = currentTime;
 
-            if (tapCount.current === 3) {
+      if (tapCount.current === 3 && !touchMoved.current) {
-                setMenuPosition({
+        setMenuPosition({ top: clientY, left: clientX });
-                    top: clientY,
-                    left: clientX,
-                });
         setMenuOpen(true);
         tapCount.current = 0; // Reset after activation
       }
     };
 
+    const handleTouchMove = (event) => {
+      const currentY = event.touches[0].clientY;
+      // If the vertical movement exceeds 10px, consider it a scroll
+      if (Math.abs(currentY - touchStartY.current) > 10) {
+        touchMoved.current = true;
+      }
+    };
+
+    const handleTouchEnd = () => {
+      // You can optionally reset tapCount here if needed
+    };
+
     document.addEventListener('touchstart', handleTouchStart);
+    document.addEventListener('touchmove', handleTouchMove);
+    document.addEventListener('touchend', handleTouchEnd);
 
     return () => {
       document.removeEventListener('touchstart', handleTouchStart);
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleTouchEnd);
     };
   }, []);
 
@@ -69,55 +88,57 @@ export const GlobalTouchMenu = () => {
     <CustomStyledMenu
       open={menuOpen}
       anchorReference="anchorPosition"
-            anchorPosition={menuPosition ? { top: menuPosition?.top, left: menuPosition?.left } : undefined}
+      anchorPosition={
+        menuPosition ? { top: menuPosition.top, left: menuPosition.left } : undefined
+      }
     >
       <MenuItem onClick={handleClose}>
-            <Box sx={{
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-                display: 'flex',
-                alignItems: 'center',
-                gap: '10px'
-            }}>
           <CloseIcon />
           <Typography variant="inherit">Close Menu</Typography>
         </Box>
-              
       </MenuItem>
       <Divider />
-            <MenuItem onClick={()=> {
+      <MenuItem
-                executeEvent('open-apps-mode', {})
+        onClick={() => {
-                handleClose()
+          executeEvent('open-apps-mode', {});
-            }}>
+          handleClose();
+        }}
+      >
         <Typography variant="inherit">Apps</Typography>
       </MenuItem>
-            <MenuItem onClick={()=> {
+      <MenuItem
-                 executeEvent("openGroupMessage", {
+        onClick={() => {
-                              from: lastEnteredGroupId ,
+          executeEvent('openGroupMessage', { from: lastEnteredGroupId });
-                            });
+          handleClose();
-                handleClose()
+        }}
-            }}>
+      >
         <Typography variant="inherit">Group Chat</Typography>
       </MenuItem>
-            <MenuItem onClick={()=> {
+      <MenuItem
-                executeEvent('openUserLookupDrawer', {
+        onClick={() => {
-                                  addressOrName: ""
+          executeEvent('openUserLookupDrawer', { addressOrName: '' });
-                                 })
+          handleClose();
-                handleClose()
+        }}
-            }}>
+      >
         <Typography variant="inherit">User Lookup</Typography>
       </MenuItem>
-            <MenuItem onClick={()=> {
+      <MenuItem
-                executeEvent('openUserProfile',{})
+        onClick={() => {
-                handleClose()
+          executeEvent('openUserProfile', {});
-            }}>
+          handleClose();
+        }}
+      >
         <Typography variant="inherit">My Account</Typography>
       </MenuItem>
-            <MenuItem onClick={()=> {
+      <MenuItem
-                 executeEvent('openWalletsApp', {})
+        onClick={() => {
-                handleClose()
+          executeEvent('openWalletsApp', {});
-            }}>
+          handleClose();
+        }}
+      >
         <Typography variant="inherit">Wallets</Typography>
       </MenuItem>
     </CustomStyledMenu>
   );
 };
-