Link on mousedown breaks view transitions on phones

react

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

TanStack•10mo ago•

3 replies

precious-lavender

Link on mousedown breaks view transitions on phones

react

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

Link on mousedown breaks view transitions on phones

Similar Threads

Link on mousedown breaks view transitions on phones

Similar Threads

Similar Threads

Similar Threads