T
TanStack•4mo ago
afraid-scarlet

Link on mousedown breaks view transitions on phones

I created this CustomLink component to be able to navigate instantly on mousedown, but it breaks view transitions on phones 👀 : 
import { createLink, type LinkComponent } from '@tanstack/react-router';

export const CustomLinkComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
    // In phones this breaks view transitions
    return (
        <a
            onMouseDown={(event) => {
                event.currentTarget.click();
            }}
            {...props}
        />
    );
};

CustomLinkComponent.displayName = 'CustomLinkComponent';

const CreatedLinkComponent = createLink(CustomLinkComponent);

export const CustomLink: LinkComponent<typeof CustomLinkComponent> = (props) => {
    return <CreatedLinkComponent {...props} />;
};
import { createLink, type LinkComponent } from '@tanstack/react-router';

export const CustomLinkComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
    // In phones this breaks view transitions
    return (
        <a
            onMouseDown={(event) => {
                event.currentTarget.click();
            }}
            {...props}
        />
    );
};

CustomLinkComponent.displayName = 'CustomLinkComponent';

const CreatedLinkComponent = createLink(CustomLinkComponent);

export const CustomLink: LinkComponent<typeof CustomLinkComponent> = (props) => {
    return <CreatedLinkComponent {...props} />;
};
I tested it on version 1.120.5 with iPhone
1 Reply
afraid-scarlet
afraid-scarletOP•4mo ago
Ok, I also tried with a regular Link imported from @tanstack/react-router and happens the same: 
<Link
  to="/"
  viewTransition
  onMouseDown={(event) => {
    event.currentTarget.click();
  }}>Test</Link>
<Link
  to="/"
  viewTransition
  onMouseDown={(event) => {
    event.currentTarget.click();
  }}>Test</Link>

Did you find this page helpful?