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)
This commit is contained in:
pengx17 2024-10-15 05:56:23 +00:00
parent 3d3864fa5b
commit c484cad7b2
No known key found for this signature in database
GPG Key ID: 23F23D9E8B3971ED
2 changed files with 16 additions and 12 deletions

View File

@ -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();
}}
>

View File

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