diff --git a/packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.tsx b/packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.tsx index 4b3c45ff72..3d83f5e575 100644 --- a/packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.tsx +++ b/packages/ui/src/elements/Table/DefaultCell/fields/Relationship/index.tsx @@ -39,7 +39,6 @@ export const RelationshipCell: React.FC = ({ useEffect(() => { if (cellData && isAboveViewport && !hasRequested) { const formattedValues: Value[] = [] - const arrayCellData = Array.isArray(cellData) ? cellData : [cellData] arrayCellData .slice(0, arrayCellData.length < totalToShow ? arrayCellData.length : totalToShow) @@ -71,6 +70,13 @@ export const RelationshipCell: React.FC = ({ getRelationships, ]) + useEffect(() => { + if (hasRequested) { + setHasRequested(false) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [cellData]) + return (
{values.map(({ relationTo, value }, i) => { diff --git a/test/fields-relationship/e2e.spec.ts b/test/fields-relationship/e2e.spec.ts index 18da252f5c..f11d9177fe 100644 --- a/test/fields-relationship/e2e.spec.ts +++ b/test/fields-relationship/e2e.spec.ts @@ -26,7 +26,7 @@ import { } from '../helpers.js' import { AdminUrlUtil } from '../helpers/adminUrlUtil.js' import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js' -import { TEST_TIMEOUT_LONG } from '../playwright.config.js' +import { POLL_TOPASS_TIMEOUT, TEST_TIMEOUT_LONG } from '../playwright.config.js' import { relationFalseFilterOptionSlug, relationOneSlug, @@ -531,6 +531,51 @@ describe('fields - relationship', () => { const relationship = page.locator('.row-1 .cell-relationshipWithTitle') await expect(relationship).toHaveText(relationWithTitle.name) }) + + test('should update relationship values on page change in list view', async () => { + await clearCollectionDocs(slug) + // create new docs to paginate to + for (let i = 0; i < 10; i++) { + await payload.create({ + collection: slug, + data: { + relationshipHasManyMultiple: [ + { + relationTo: relationOneSlug, + value: relationOneDoc.id, + }, + ], + }, + }) + } + + for (let i = 0; i < 10; i++) { + await payload.create({ + collection: slug, + data: { + relationshipHasManyMultiple: [ + { + relationTo: relationTwoSlug, + value: relationTwoDoc.id, + }, + ], + }, + }) + } + + await page.goto(url.list) + + // check first doc on first page + const relationship = page.locator('.row-1 .cell-relationshipHasManyMultiple') + await expect(relationship).toHaveText(relationTwoDoc.id) + + const paginator = page.locator('.clickable-arrow--right') + await paginator.click() + await expect.poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }).toContain('page=2') + + // check first doc on second page (should be different) + await expect(relationship).toContainText(relationOneDoc.id) + }) }) describe('externally update relationship field', () => {