From e682cb1b04f30965e78bef37207003f44008255d Mon Sep 17 00:00:00 2001
From: Ritsu <enjoythepain1337@gmail.com>
Date: Mon, 20 May 2024 23:03:04 +0300
Subject: [PATCH] fix(ui): update relationship cell formatted value when when
 search changes (#6208)

## Description

Fixes https://github.com/payloadcms/payload-3.0-demo/issues/181
Although issue is about page changing, it happens as well when you
change sort / limit / where filter (and probably locale)
<!-- Please include a summary of the pull request and any related issues
it fixes. Please also include relevant motivation and context. -->

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

<!-- Please delete options that are not relevant. -->


- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [x] Existing test suite passes locally with my changes

---------

Co-authored-by: Jessica Chowdhury <jessica@trbl.design>
---
 .../DefaultCell/fields/Relationship/index.tsx |  8 +++-
 test/fields-relationship/e2e.spec.ts          | 47 ++++++++++++++++++-
 2 files changed, 53 insertions(+), 2 deletions(-)

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<RelationshipCellProps> = ({
   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<RelationshipCellProps> = ({
     getRelationships,
   ])
 
+  useEffect(() => {
+    if (hasRequested) {
+      setHasRequested(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cellData])
+
   return (
     <div className={baseClass} ref={intersectionRef}>
       {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', () => {