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

74b182b401/packages/react/dismissable-layer/src/DismissableLayer.tsx (L243-L261)

packages/frontend/core/src/modules/explorer/views/tree/node.tsx

@@ -302,13 +302,19 @@ export const ExplorerTreeNode = ({
     [onRename]
   );
 
-  const handleClick = useCallback(() => {
+  const handleClick = useCallback(
-    if (!clickForCollapse) {
+    (e: React.MouseEvent) => {
-      onClick?.();
+      if (e.defaultPrevented) {
-    } else {
+        return;
-      setCollapsed(!collapsed);
+      }
-    }
+      if (!clickForCollapse) {
-  }, [clickForCollapse, collapsed, onClick, setCollapsed]);
+        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();
             }}
           >

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]
     );