CODEWITHSUNDEEP
reactjsreact-admin
zzmaster
zzmaster

Reputation: 317

Link not opening in React admin's list - makes edit instead

I have a Resource of campaigns; id field of each campaign linked to a standalone page of URLs, belonging to that campaign. (I still don't know how I'll do it).

I use custom field

import { useRecordContext, useGetOne } from 'react-admin';
import { Link } from 'react-router-dom';

export default  () => {

    const campaign = useRecordContext();
    const { data, isLoading } = useGetOne('campaign', { id: campaign.campaign_id });
    const campaignUrlsPage = `/campaign/${campaign.id}/urls/`;
    return /*isLoading ? null : */ <Link to={campaignUrlsPage}>{campaign.id}</Link>;

};

Why I commented out isLoading? Strange thing but it's always true, after all I don't notice any artefact that way.

Links are shown in the corresponding ceils, thay are actually ancor tags, but clicking them causes record edit. Yes, I have rowClick="edit" and I really need it. Additionally, I have UrlField in the grid, and clicking it first shows record edit page but next it directs to the URL. Can it be fixed?

Thanks in advance.

Upvotes: 0

Views: 280

Answers (1)

Fran&#231;ois Zaninotto
Fran&#231;ois Zaninotto

Reputation: 7335

To support rowClick="edit", each datagrid row has a click handler.

If you put your button in a datagrid, when users click on the button, the click even propagates down to the datagrid row, and the row click event handler fires.

So you must stop event propagation in your link:

export default  () => {

    const campaign = useRecordContext();
    const { data, isLoading } = useGetOne('campaign', { id: campaign.campaign_id });
    const campaignUrlsPage = `/campaign/${campaign.id}/urls/`;
    return isLoading ? null : (
        <Link 
            to={campaignUrlsPage}
            onClick={e => e.stopPropagation()}
        >
            {campaign.id}
        </Link>
    );

};

Upvotes: 2

Related Questions