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

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],
   )
 

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)}

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()