From ef2475d804285ce6c5091f3257f1da98c12133a2 Mon Sep 17 00:00:00 2001
From: Sasha <64744993+r1tsuu@users.noreply.github.com>
Date: Sun, 17 Nov 2024 18:32:50 +0200
Subject: [PATCH] fix(ui): avoid calling `getTableState` from join field on
 create (#9256)

### What?
Fixes the issue when visiting the create view with the Join Field and
using postgres adapter
```
invalid input syntax for type integer: "NaN"
```
This happens because we don't have an ID yet and we send to the
database:
`WHERE id = NaN`

### How?
Avoids calling `getTableState` inside of `RelationshipTable` if there's
no ID yet, as it will always lead to the same empty result. While we
_could_ avoid error directly in the database adapter, I don't think we
should do that render request

Fixes https://github.com/payloadcms/payload/issues/9193
---
 .../ui/src/elements/RelationshipTable/index.tsx   |  6 ++++--
 packages/ui/src/fields/Join/index.tsx             |  9 +++++++--
 test/joins/e2e.spec.ts                            | 15 ++++++++++++++-
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/elements/RelationshipTable/index.tsx b/packages/ui/src/elements/RelationshipTable/index.tsx
index 2f3b247233d..99ce35ecaa2 100644
--- a/packages/ui/src/elements/RelationshipTable/index.tsx
+++ b/packages/ui/src/elements/RelationshipTable/index.tsx
@@ -39,6 +39,7 @@ const baseClass = 'relationship-table'
 
 type RelationshipTableComponentProps = {
   readonly allowCreate?: boolean
+  readonly disableTable?: boolean
   readonly field: JoinFieldClient
   readonly filterOptions?: Where
   readonly initialData?: PaginatedDocs
@@ -50,6 +51,7 @@ type RelationshipTableComponentProps = {
 export const RelationshipTable: React.FC<RelationshipTableComponentProps> = (props) => {
   const {
     allowCreate = true,
+    disableTable = false,
     filterOptions,
     initialData: initialDataFromProps,
     initialDrawerData,
@@ -132,11 +134,11 @@ export const RelationshipTable: React.FC<RelationshipTableComponentProps> = (pro
 
   useIgnoredEffect(
     () => {
-      if (!Table || query) {
+      if (!disableTable && (!Table || query)) {
         void renderTable()
       }
     },
-    [query],
+    [query, disableTable],
     [Table, renderTable],
   )
 
diff --git a/packages/ui/src/fields/Join/index.tsx b/packages/ui/src/fields/Join/index.tsx
index d508998e521..a05d94f2086 100644
--- a/packages/ui/src/fields/Join/index.tsx
+++ b/packages/ui/src/fields/Join/index.tsx
@@ -33,10 +33,14 @@ const JoinFieldComponent: JoinFieldClientComponent = (props) => {
       path,
     })
 
-  const filterOptions: Where = useMemo(() => {
+  const filterOptions: null | Where = useMemo(() => {
+    if (!docID) {
+      return null
+    }
+
     const where = {
       [on]: {
-        in: [docID || ''],
+        equals: docID,
       },
     }
 
@@ -54,6 +58,7 @@ const JoinFieldComponent: JoinFieldClientComponent = (props) => {
       {BeforeInput}
       <RelationshipTable
         allowCreate={typeof docID !== 'undefined' && allowCreate}
+        disableTable={filterOptions === null}
         field={field as JoinFieldClient}
         filterOptions={filterOptions}
         initialData={docID && value ? value : ({ docs: [] } as PaginatedDocs)}
diff --git a/test/joins/e2e.spec.ts b/test/joins/e2e.spec.ts
index 81221a61ed7..fcc66a285c1 100644
--- a/test/joins/e2e.spec.ts
+++ b/test/joins/e2e.spec.ts
@@ -5,7 +5,12 @@ import { reorderColumns } from 'helpers/e2e/reorderColumns.js'
 import * as path from 'path'
 import { fileURLToPath } from 'url'
 
-import { ensureCompilationIsDone, exactText, initPageConsoleErrorCatch } from '../helpers.js'
+import {
+  ensureCompilationIsDone,
+  exactText,
+  initPageConsoleErrorCatch,
+  saveDocAndAssert,
+} from '../helpers.js'
 import { AdminUrlUtil } from '../helpers/adminUrlUtil.js'
 import { navigateToDoc } from '../helpers/e2e/navigateToDoc.js'
 import { initPayloadE2ENoConfig } from '../helpers/initPayloadE2ENoConfig.js'
@@ -57,6 +62,14 @@ test.describe('Admin Panel', () => {
     expect(columns).toBe(3)
   })
 
+  test('should render the create page and create doc with the join field', async () => {
+    await page.goto(categoriesURL.create)
+    const nameField = page.locator('#field-name')
+    await expect(nameField).toBeVisible()
+    await nameField.fill('test category')
+    await saveDocAndAssert(page)
+  })
+
   test('should render collection type in first column of relationship table', async () => {
     await navigateToDoc(page, categoriesURL)
     const joinField = page.locator('.field-type.join').first()