From c484cad7b20529c7662060713707dc024a92c177 Mon Sep 17 00:00:00 2001
From: pengx17 <pengxiao@outlook.com>
Date: Tue, 15 Oct 2024 05:56:23 +0000
Subject: [PATCH] fix(mobile): handle touch event correctly (#8496)

related:

radix-ui has a hack for dealing with touch event on mobile devices. we may not want to stop propagation for event that is not being handled, even for links

https://github.com/radix-ui/primitives/blob/74b182b401c8ca0fa5b66a5a9a47f507bb3d5adc/packages/react/dismissable-layer/src/DismissableLayer.tsx#L243-L261
---
 .../src/modules/explorer/views/tree/node.tsx  | 23 +++++++++++--------
 .../modules/workbench/view/workbench-link.tsx |  5 ++--
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/core/src/modules/explorer/views/tree/node.tsx b/packages/frontend/core/src/modules/explorer/views/tree/node.tsx
index c4e5484aa4..6e79716e9a 100644
--- a/packages/frontend/core/src/modules/explorer/views/tree/node.tsx
+++ b/packages/frontend/core/src/modules/explorer/views/tree/node.tsx
@@ -302,13 +302,19 @@ export const ExplorerTreeNode = ({
     [onRename]
   );
 
-  const handleClick = useCallback(() => {
-    if (!clickForCollapse) {
-      onClick?.();
-    } else {
-      setCollapsed(!collapsed);
-    }
-  }, [clickForCollapse, collapsed, onClick, setCollapsed]);
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.defaultPrevented) {
+        return;
+      }
+      if (!clickForCollapse) {
+        onClick?.();
+      } else {
+        setCollapsed(!collapsed);
+      }
+    },
+    [clickForCollapse, collapsed, onClick, setCollapsed]
+  );
 
   const content = (
     <div
@@ -346,18 +352,15 @@ export const ExplorerTreeNode = ({
               />
             ))}
         </div>
-
         <div className={mobile ? styles.mobileItemContent : styles.itemContent}>
           {name}
         </div>
-
         {postfix}
         {mobile ? null : (
           <div
             className={styles.postfix}
             onClick={e => {
               // prevent jump to page
-              e.stopPropagation();
               e.preventDefault();
             }}
           >
diff --git a/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx b/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
index 79847a1a4c..429d42ae4c 100644
--- a/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
+++ b/packages/frontend/core/src/modules/workbench/view/workbench-link.tsx
@@ -1,4 +1,4 @@
-import { useCatchEventCallback } from '@affine/core/components/hooks/use-catch-event-hook';
+import { useAsyncCallback } from '@affine/core/components/hooks/affine-async-hooks';
 import { isNewTabTrigger } from '@affine/core/utils';
 import {
   FeatureFlagService,
@@ -32,7 +32,7 @@ export const WorkbenchLink = forwardRef<HTMLAnchorElement, WorkbenchLinkProps>(
     const link =
       basename +
       (typeof to === 'string' ? to : `${to.pathname}${to.search}${to.hash}`);
-    const handleClick = useCatchEventCallback(
+    const handleClick = useAsyncCallback(
       async (event: React.MouseEvent<HTMLAnchorElement>) => {
         onClick?.(event);
         if (event.defaultPrevented) {
@@ -48,6 +48,7 @@ export const WorkbenchLink = forwardRef<HTMLAnchorElement, WorkbenchLinkProps>(
         })();
         workbench.open(to, { at, replaceHistory });
         event.preventDefault();
+        event.stopPropagation();
       },
       [enableMultiView, onClick, replaceHistory, to, workbench]
     );