* fix: css selectors

src/admin/components/elements/Table/index.tsx

@@ -24,11 +24,14 @@ const Table: React.FC<Props> = ({ columns, data }) => {
           </thead>
           <tbody>
             {data && data.map((row, rowIndex) => (
-              <tr key={rowIndex}>
+              <tr
+                key={rowIndex}
+                className={`row-${rowIndex + 1}`}
+              >
                 {columns.map((col, colIndex) => (
                   <td
                     key={colIndex}
-                    className={col.accessor}
+                    className={`cell-${col.accessor}`}
                   >
                     {col.components.renderCell(row, row[col.accessor])}
                   </td>

src/admin/components/forms/field-types/Array/Array.tsx

@@ -131,6 +131,7 @@ const ArrayFieldType: React.FC<Props> = (props) => {
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <div
+        id={`field-${path}`}
         className={classes}
       >
         <div className={`${baseClass}__error-wrap`}>

src/admin/components/forms/field-types/Blocks/Blocks.tsx

@@ -181,6 +181,7 @@ const Blocks: React.FC<Props> = (props) => {
   return (
     <DragDropContext onDragEnd={onDragEnd}>
       <div
+        id={`field-${path}`}
         className={classes}
       >
         <div className={`${baseClass}__error-wrap`}>

src/admin/components/forms/field-types/Checkbox/index.tsx

@@ -70,9 +70,9 @@ const Checkbox: React.FC<Props> = (props) => {
         />
       </div>
       <input
+        id={`field-${path}`}
         type="checkbox"
         name={path}
-        id={path}
         checked={Boolean(value)}
         readOnly
       />

src/admin/components/forms/field-types/Code/Code.tsx

@@ -78,11 +78,12 @@ const Code: React.FC<Props> = (props) => {
         message={errorMessage}
       />
       <Label
-        htmlFor={path}
+        htmlFor={`field-${path}`}
         label={label}
         required={required}
       />
       <Editor
+        id={`field-${path}`}
         value={value as string || ''}
         onValueChange={readOnly ? () => null : setValue}
         highlight={highlighter}

src/admin/components/forms/field-types/ConfirmPassword/index.tsx

@@ -43,7 +43,7 @@ const ConfirmPassword: React.FC = () => {
         message={errorMessage}
       />
       <Label
-        htmlFor="confirm-password"
+        htmlFor="field-confirm-password"
         label="Confirm Password"
         required
       />
@@ -52,7 +52,7 @@ const ConfirmPassword: React.FC = () => {
         onChange={setValue}
         type="password"
         autoComplete="off"
-        id="confirm-password"
+        id="field-confirm-password"
         name="confirm-password"
       />
     </div>

src/admin/components/forms/field-types/DateTime/index.tsx

@@ -76,7 +76,10 @@ const DateTime: React.FC<Props> = (props) => {
         label={label}
         required={required}
       />
-      <div className={`${baseClass}__input-wrapper`}>
+      <div
+        className={`${baseClass}__input-wrapper`}
+        id={`field-${path}`}
+      >
         <DatePicker
           {...date}
           placeholder={placeholder}

src/admin/components/forms/field-types/Email/index.tsx

@@ -70,16 +70,16 @@ const Email: React.FC<Props> = (props) => {
       />
       <Label
         htmlFor={path}
-        label={label}
+        label={`field-${path}`}
         required={required}
       />
       <input
+        id={`field-${path}`}
         value={value as string || ''}
         onChange={setValue}
         disabled={Boolean(readOnly)}
         placeholder={placeholder}
         type="email"
-        id={path}
         name={path}
         autoComplete={autoComplete}
       />

src/admin/components/forms/field-types/Group/index.tsx

@@ -33,6 +33,7 @@ const Group: React.FC<Props> = (props) => {
 
   return (
     <div
+      id={`field-${path}`}
       className={[
         'field-type',
         baseClass,

src/admin/components/forms/field-types/HiddenInput/index.tsx

@@ -25,6 +25,7 @@ const HiddenInput: React.FC<Props> = (props) => {
 
   return (
     <input
+      id={`field-${path}`}
       type="hidden"
       value={value as string || ''}
       onChange={setValue}

src/admin/components/forms/field-types/Number/index.tsx

@@ -79,17 +79,17 @@ const NumberField: React.FC<Props> = (props) => {
         message={errorMessage}
       />
       <Label
-        htmlFor={path}
+        htmlFor={`field-${path}`}
         label={label}
         required={required}
       />
       <input
+        id={`field-${path}`}
         value={typeof value === 'number' ? value : ''}
         onChange={handleChange}
         disabled={readOnly}
         placeholder={placeholder}
         type="number"
-        id={path}
         name={path}
         step={step}
       />

src/admin/components/forms/field-types/Password/index.tsx

@@ -60,17 +60,17 @@ const Password: React.FC<Props> = (props) => {
         message={errorMessage}
       />
       <Label
-        htmlFor={path}
+        htmlFor={`field-${path}`}
         label={label}
         required={required}
       />
       <input
+        id={`field-${path}`}
         value={value as string || ''}
         onChange={setValue}
         disabled={formProcessing}
         type="password"
         autoComplete={autoComplete}
-        id={path}
         name={path}
       />
     </div>

src/admin/components/forms/field-types/Point/index.tsx

@@ -81,34 +81,34 @@ const PointField: React.FC<Props> = (props) => {
       <ul className={`${baseClass}__wrap`}>
         <li>
           <Label
-            htmlFor={`${path}.longitude`}
+            htmlFor={`field-longitude-${path}`}
             label={`${label} - Longitude`}
             required={required}
           />
           <input
+            id={`field-longitude-${path}`}
             value={(value && typeof value[0] === 'number') ? value[0] : ''}
             onChange={(e) => handleChange(e, 0)}
             disabled={readOnly}
             placeholder={placeholder}
             type="number"
-            id={`${path}.longitude`}
             name={`${path}.longitude`}
             step={step}
           />
         </li>
         <li>
           <Label
-            htmlFor={`${path}.latitude`}
+            htmlFor={`field-latitude-${path}`}
             label={`${label} - Latitude`}
             required={required}
           />
           <input
+            id={`field-latitude-${path}`}
             value={(value && typeof value[1] === 'number') ? value[1] : ''}
             onChange={(e) => handleChange(e, 1)}
             disabled={readOnly}
             placeholder={placeholder}
             type="number"
-            id={`${path}.latitude`}
             name={`${path}.latitude`}
             step={step}
           />

src/admin/components/forms/field-types/RadioGroup/Input.tsx

@@ -73,11 +73,14 @@ const RadioGroupInput: React.FC<RadioGroupInputProps> = (props) => {
         />
       </div>
       <Label
-        htmlFor={path}
+        htmlFor={`field-${path}`}
         label={label}
         required={required}
       />
-      <ul className={`${baseClass}--group`}>
+      <ul
+        id={`field-${path}`}
+        className={`${baseClass}--group`}
+      >
         {options.map((option) => {
           let optionValue = '';
 

src/admin/components/forms/field-types/RadioGroup/RadioInput/index.tsx

@@ -13,7 +13,7 @@ const RadioInput: React.FC<Props> = (props) => {
     isSelected && `${baseClass}--is-selected`,
   ].filter(Boolean).join(' ');
 
-  const id = `${path}-${option.value}`;
+  const id = `field-${path}-${option.value}`;
 
   return (
     <label

src/admin/components/forms/field-types/Relationship/index.tsx

@@ -335,6 +335,7 @@ const Relationship: React.FC<Props> = (props) => {
 
   return (
     <div
+      id={`field-${path}`}
       className={classes}
       style={{
         ...style,

src/admin/components/forms/field-types/RichText/RichText.tsx

@@ -209,7 +209,7 @@ const RichText: React.FC<Props> = (props) => {
           message={errorMessage}
         />
         <Label
-          htmlFor={path}
+          htmlFor={`field-${path}`}
           label={label}
           required={required}
         />
@@ -270,6 +270,7 @@ const RichText: React.FC<Props> = (props) => {
               ref={editorRef}
             >
               <Editable
+                id={`field-${path}`}
                 className={`${baseClass}__input`}
                 renderElement={renderElement}
                 renderLeaf={renderLeaf}

src/admin/components/forms/field-types/Select/Input.tsx

@@ -62,6 +62,7 @@ const SelectInput: React.FC<SelectInputProps> = (props) => {
 
   return (
     <div
+      id={`field-${path}`}
       className={classes}
       style={{
         ...style,

src/admin/components/forms/field-types/Text/Input.tsx

@@ -61,17 +61,17 @@ const TextInput: React.FC<TextInputProps> = (props) => {
         message={errorMessage}
       />
       <Label
-        htmlFor={path}
+        htmlFor={`field-${path}`}
         label={label}
         required={required}
       />
       <input
+        id={`field-${path}`}
         value={value || ''}
         onChange={onChange}
         disabled={readOnly}
         placeholder={placeholder}
         type="text"
-        id={path}
         name={path}
       />
       <FieldDescription

src/admin/components/forms/field-types/Textarea/Input.tsx

@@ -62,16 +62,16 @@ const TextareaInput: React.FC<TextAreaInputProps> = (props) => {
         message={errorMessage}
       />
       <Label
-        htmlFor={path}
+        htmlFor={`field-${path}`}
         label={label}
         required={required}
       />
       <textarea
+        id={`field-${path}`}
         value={value || ''}
         onChange={onChange}
         disabled={readOnly}
         placeholder={placeholder}
-        id={path}
         name={path}
         rows={rows}
       />

src/admin/components/views/collections/List/Cell/field-types/Relationship/index.tsx

@@ -7,6 +7,7 @@ import './index.scss';
 
 type Value = { relationTo: string, value: number | string };
 const baseClass = 'relationship-cell';
+const totalToShow = 3;
 
 const RelationshipCell = (props) => {
   const { field, data: cellData } = props;
@@ -23,7 +24,7 @@ const RelationshipCell = (props) => {
       const formattedValues: Value[] = [];
 
       const arrayCellData = Array.isArray(cellData) ? cellData : [cellData];
-      arrayCellData.slice(0, (arrayCellData.length < 3 ? arrayCellData.length : 3)).forEach((cell) => {
+      arrayCellData.slice(0, (arrayCellData.length < totalToShow ? arrayCellData.length : totalToShow)).forEach((cell) => {
         if (typeof cell === 'object' && 'relationTo' in cell && 'value' in cell) {
           formattedValues.push(cell);
         }
@@ -50,16 +51,17 @@ const RelationshipCell = (props) => {
         const relatedCollection = collections.find(({ slug }) => slug === relationTo);
         return (
           <React.Fragment key={i}>
-            {document && document[relatedCollection.admin.useAsTitle] ? document[relatedCollection.admin.useAsTitle] : `Untitled - ID: ${value}`}
+            { document === false && `Untitled - ID: ${value}`}
+            { document === null && 'Loading...'}
+            { document && (
+              document[relatedCollection.admin.useAsTitle] ? document[relatedCollection.admin.useAsTitle] : `Untitled - ID: ${value}`
+            )}
             {values.length > i + 1 && ', '}
           </React.Fragment>
         );
       })}
-      {!cellData && !values && hasRequested && (
+      { Array.isArray(cellData) && cellData.length > totalToShow && ` and ${cellData.length - totalToShow} more` }
-        <React.Fragment>
+      { values.length === 0 && `No <${field.label}>`}
-          {`No <${field.label}>`}
-        </React.Fragment>
-      )}
     </div>
   );
 };

src/admin/components/views/collections/List/Cell/field-types/Upload/index.tsx

@@ -1,47 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import querystring from 'qs';
-import { requests } from '../../../../../../../api';
-import { useConfig } from '../../../../../../utilities/Config';
-
-const UploadCell = ({ data, field }) => {
-  const [cell, setCell] = useState<string>();
-  const { routes } = useConfig();
-
-  useEffect(() => {
-    const fetchUpload = async () => {
-      const params = {
-        depth: 0,
-        limit: 1,
-        where: {
-          id: {
-            equals: data.id,
-          },
-        },
-      };
-      const url = `${routes.api}/${field.relationTo}`;
-      const query = querystring.stringify(params, { addQueryPrefix: true });
-      const request = await requests.get(`${url}${query}`);
-      const result = await request.json();
-
-      if (result?.docs.length === 1) {
-        setCell(result.docs[0].filename);
-      } else {
-        setCell(`Untitled - ${data}`);
-      }
-    };
-
-    fetchUpload();
-    // get the doc
-  }, [data, field.relationTo, routes.api]);
-
-  return (
-
-    <React.Fragment>
-      <span>
-        { cell }
-      </span>
-    </React.Fragment>
-  );
-};
-
-export default UploadCell;

src/admin/components/views/collections/List/Cell/field-types/index.tsx

@@ -7,7 +7,6 @@ import relationship from './Relationship';
 import richText from './Richtext';
 import select from './Select';
 import textarea from './Textarea';
-import upload from './Upload';
 
 
 export default {
@@ -20,5 +19,5 @@ export default {
   richText,
   select,
   textarea,
-  upload,
+  upload: relationship,
 };

src/admin/components/views/collections/List/RelationshipProvider/index.tsx

@@ -1,14 +1,16 @@
 import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef } from 'react';
 import querystring from 'qs';
 import { useConfig } from '../../../../utilities/Config';
-import { requests } from '../../../../../api';
 import { TypeWithID } from '../../../../../../collections/config/types';
 import { reducer } from './reducer';
 import useDebounce from '../../../../../hooks/useDebounce';
 
+// documents are first set to null when requested
+// set to false when no doc is returned
+// or set to the document returned
 export type Documents = {
  [slug: string]: {
-   [id: string | number]: TypeWithID | null | 'loading'
+   [id: string | number]: TypeWithID | null | false
  }
 }
 
@@ -32,7 +34,7 @@ export const RelationshipProvider: React.FC<{children?: React.ReactNode}> = ({ c
   } = config;
 
   useEffect(() => {
-    Object.entries(debouncedDocuments).forEach(([slug, docs]) => {
+    Object.entries(debouncedDocuments).forEach(async ([slug, docs]) => {
       const idsToLoad: (string | number)[] = [];
 
       Object.entries(docs).forEach(([id, value]) => {
@@ -50,12 +52,15 @@ export const RelationshipProvider: React.FC<{children?: React.ReactNode}> = ({ c
         };
 
         const query = querystring.stringify(params, { addQueryPrefix: true });
-        requests.get(`${url}${query}`).then(async (res) => {
+        const result = await fetch(`${url}${query}`);
-          const result = await res.json();
+        if (result.ok) {
-          if (result.docs) {
+          const json = await result.json();
-            dispatchDocuments({ type: 'ADD_LOADED', docs: result.docs, relationTo: slug });
+          if (json.docs) {
+            dispatchDocuments({ type: 'ADD_LOADED', docs: json.docs, relationTo: slug, idsToLoad });
+          }
+        } else {
+          dispatchDocuments({ type: 'ADD_LOADED', docs: [], relationTo: slug, idsToLoad });
         }
-        });
       }
     });
   }, [serverURL, api, debouncedDocuments]);

src/admin/components/views/collections/List/RelationshipProvider/reducer.ts

@@ -10,6 +10,7 @@ type AddLoadedDocuments = {
   type: 'ADD_LOADED',
   relationTo: string,
   docs: TypeWithID[],
+  idsToLoad: (string | number)[]
 }
 
 type Action = RequestDocuments | AddLoadedDocuments;
@@ -34,13 +35,19 @@ export function reducer(state: Documents, action: Action): Documents {
       if (typeof newState[action.relationTo] !== 'object') {
         newState[action.relationTo] = {};
       }
+      const unreturnedIDs = [...action.idsToLoad];
 
       if (Array.isArray(action.docs)) {
         action.docs.forEach((doc) => {
+          unreturnedIDs.splice(unreturnedIDs.indexOf(doc.id), 1);
           newState[action.relationTo][doc.id] = doc;
         });
       }
 
+      unreturnedIDs.forEach((id) => {
+        newState[action.relationTo][id] = false;
+      });
+
       return newState;
     }
 

src/admin/components/views/collections/List/buildColumns.tsx

@@ -58,6 +58,7 @@ const buildColumns = (collection: SanitizedCollectionConfig, columns: string[]):
           ),
           renderCell: (rowData, cellData) => (
             <Cell
+              key={JSON.stringify(cellData)}
               field={field}
               colIndex={colIndex}
               collection={collection}

src/collections/operations/local/create.ts

@@ -1,4 +1,3 @@
-import { UploadedFile } from 'express-fileupload';
 import { Payload } from '../../..';
 import { PayloadRequest } from '../../../express/types';
 import { Document } from '../../../types';

test/e2e/fields-relationship/config.ts

@@ -1,6 +1,7 @@
 import type { CollectionConfig } from '../../../src/collections/config/types';
 import { buildConfig } from '../buildConfig';
 import { devUser } from '../../credentials';
+import { mapAsync } from '../../../src/utilities/mapAsync';
 
 export const slug = 'fields-relationship';
 
@@ -13,6 +14,7 @@ export interface FieldsRelationship {
   id: string;
   relationship: RelationOne;
   relationshipHasMany: RelationOne[];
+  relationshipHasManyMultiple: Array<RelationOne | RelationTwo | { relationTo: string, value: string}>;
   relationshipMultiple: Array<RelationOne | RelationTwo>;
   relationshipRestricted: RelationRestricted;
   relationshipWithTitle: RelationWithTitle;
@@ -40,7 +42,7 @@ export default buildConfig({
     {
       slug,
       admin: {
-        defaultColumns: ['relationship', 'relationshipRestricted', 'with-existing-relations'],
+        defaultColumns: ['id', 'relationship', 'relationshipRestricted', 'relationshipHasManyMultiple', 'relationshipWithTitle'],
       },
       fields: [
         {
@@ -59,6 +61,12 @@ export default buildConfig({
           name: 'relationshipMultiple',
           relationTo: [relationOneSlug, relationTwoSlug],
         },
+        {
+          type: 'relationship',
+          name: 'relationshipHasManyMultiple',
+          hasMany: true,
+          relationTo: [relationOneSlug, relationTwoSlug],
+        },
         {
           type: 'relationship',
           name: 'relationshipRestricted',
@@ -113,19 +121,27 @@ export default buildConfig({
       },
     });
 
-    await payload.create<RelationOne>({
+    const relationOneIDs = [];
+    await mapAsync([...Array(5)], async () => {
+      const doc = await payload.create<RelationOne>({
         collection: relationOneSlug,
         data: {
           name: relationOneSlug,
         },
       });
+      relationOneIDs.push(doc.id);
+    });
 
-    await payload.create<RelationTwo>({
+    const relationTwoIDs = [];
+    await mapAsync([...Array(11)], async () => {
+      const doc = await payload.create<RelationTwo>({
         collection: relationTwoSlug,
         data: {
           name: relationTwoSlug,
         },
       });
+      relationTwoIDs.push(doc.id);
+    });
 
     // Existing relationships
     const { id: restrictedDocId } = await payload.create<RelationRestricted>({
@@ -148,5 +164,28 @@ export default buildConfig({
         relationshipWithTitle: relationWithTitleDocId,
       },
     });
+    await mapAsync([...Array(11)], async () => {
+      await payload.create<FieldsRelationship>({
+        collection: slug,
+        data: {
+          relationship: relationOneDocId,
+          relationshipRestricted: restrictedDocId,
+          relationshipHasManyMultiple: relationOneIDs.map((id) => ({ relationTo: relationOneSlug, value: id })),
+        },
+      });
+    });
+    await mapAsync([...Array(15)], async () => {
+      const relationOneID = relationOneIDs[Math.floor(Math.random() * 10)];
+      const relationTwoID = relationTwoIDs[Math.floor(Math.random() * 10)];
+      await payload.create<FieldsRelationship>({
+        collection: slug,
+        data: {
+          relationship: relationOneDocId,
+          relationshipRestricted: restrictedDocId,
+          relationshipHasMany: [relationOneID],
+          relationshipHasManyMultiple: [{ relationTo: relationTwoSlug, value: relationTwoID }],
+        },
+      });
+    });
   },
 });

test/e2e/fields-relationship/index.spec.ts

@@ -104,10 +104,9 @@ describe('fields - relationship', () => {
   test('should create relationship', async () => {
     await page.goto(url.create);
 
-    const fields = page.locator('.render-fields >> .react-select');
+    const field = page.locator('#field-relationship');
-    const relationshipField = fields.nth(0);
 
-    await relationshipField.click({ delay: 100 });
+    await field.click({ delay: 100 });
 
     const options = page.locator('.rs__option');
 
@@ -115,7 +114,7 @@ describe('fields - relationship', () => {
 
     // Select a relationship
     await options.nth(1).click();
-    await expect(relationshipField).toContainText(relationOneDoc.id);
+    await expect(field).toContainText(relationOneDoc.id);
 
     await saveDocAndAssert(page);
   });
@@ -123,10 +122,9 @@ describe('fields - relationship', () => {
   test('should create hasMany relationship', async () => {
     await page.goto(url.create);
 
-    const fields = page.locator('.render-fields >> .react-select');
+    const field = page.locator('.field-relationshipHasMany');
-    const relationshipHasManyField = fields.nth(1);
 
-    await relationshipHasManyField.click({ delay: 100 });
+    await field.click({ delay: 100 });
 
     const options = page.locator('.rs__option');
 
@@ -134,16 +132,16 @@ describe('fields - relationship', () => {
 
     // Add one relationship
     await options.locator(`text=${relationOneDoc.id}`).click();
-    await expect(relationshipHasManyField).toContainText(relationOneDoc.id);
+    await expect(field).toContainText(relationOneDoc.id);
-    await expect(relationshipHasManyField).not.toContainText(anotherRelationOneDoc.id);
+    await expect(field).not.toContainText(anotherRelationOneDoc.id);
 
     // Add second relationship
-    await relationshipHasManyField.click({ delay: 100 });
+    await field.click({ delay: 100 });
     await options.locator(`text=${anotherRelationOneDoc.id}`).click();
-    await expect(relationshipHasManyField).toContainText(anotherRelationOneDoc.id);
+    await expect(field).toContainText(anotherRelationOneDoc.id);
 
     // No options left
-    await relationshipHasManyField.click({ delay: 100 });
+    await field.click({ delay: 100 });
     await expect(page.locator('.rs__menu')).toHaveText('No options');
 
     await saveDocAndAssert(page);
@@ -152,10 +150,9 @@ describe('fields - relationship', () => {
   test('should create relations to multiple collections', async () => {
     await page.goto(url.create);
 
-    const fields = page.locator('.render-fields >> .react-select');
+    const field = page.locator('.field-relationshipMultiple');
-    const relationshipMultipleField = fields.nth(2);
 
-    await relationshipMultipleField.click({ delay: 100 });
+    await field.click({ delay: 100 });
 
     const options = page.locator('.rs__option');
 
@@ -163,12 +160,12 @@ describe('fields - relationship', () => {
 
     // Add one relationship
     await options.locator(`text=${relationOneDoc.id}`).click();
-    await expect(relationshipMultipleField).toContainText(relationOneDoc.id);
+    await expect(field).toContainText(relationOneDoc.id);
 
     // Add relationship of different collection
-    await relationshipMultipleField.click({ delay: 100 });
+    await field.click({ delay: 100 });
     await options.locator(`text=${relationTwoDoc.id}`).click();
-    await expect(relationshipMultipleField).toContainText(relationTwoDoc.id);
+    await expect(field).toContainText(relationTwoDoc.id);
 
     await saveDocAndAssert(page);
   });
@@ -177,11 +174,10 @@ describe('fields - relationship', () => {
     test('should highlight existing relationship', async () => {
       await page.goto(url.edit(docWithExistingRelations.id));
 
-      const fields = page.locator('.render-fields >> .react-select');
+      const field = page.locator('#field-relationship');
-      const relationOneField = fields.nth(0);
 
       // Check dropdown options
-      await relationOneField.click({ delay: 100 });
+      await field.click({ delay: 100 });
 
       await expect(page.locator('.rs__option--is-selected')).toHaveCount(1);
       await expect(page.locator('.rs__option--is-selected')).toHaveText(relationOneDoc.id);
@@ -190,29 +186,31 @@ describe('fields - relationship', () => {
     test('should show untitled ID on restricted relation', async () => {
       await page.goto(url.edit(docWithExistingRelations.id));
 
-      const fields = page.locator('.render-fields >> .react-select');
+      const field = page.locator('#field-relationshipRestricted');
-      const restrictedRelationField = fields.nth(3);
 
       // Check existing relationship has untitled ID
-      await expect(restrictedRelationField).toContainText(`Untitled - ID: ${restrictedRelation.id}`);
+      await expect(field).toContainText(`Untitled - ID: ${restrictedRelation.id}`);
 
       // Check dropdown options
-      await restrictedRelationField.click({ delay: 100 });
+      await field.click({ delay: 100 });
       const options = page.locator('.rs__option');
 
       await expect(options).toHaveCount(2); // None + 1 Unitled ID
     });
 
+    // test.todo('should paginate within the dropdown');
+    // test.todo('should search within the relationship field');
+
     test('should show useAsTitle on relation', async () => {
       await page.goto(url.edit(docWithExistingRelations.id));
 
-      const fields = page.locator('.render-fields >> .react-select');
+      const field = page.locator('#field-relationshipWithTitle .react-select');
-      const relationWithTitleField = fields.nth(4);
 
       // Check existing relationship for correct title
-      await expect(relationWithTitleField).toHaveText(relationWithTitle.name);
+      await expect(field).toHaveText(relationWithTitle.name);
+      await page.screenshot({ path: './bad.png' });
 
-      await relationWithTitleField.click({ delay: 100 });
+      await field.click({ delay: 100 });
       const options = page.locator('.rs__option');
 
       await expect(options).toHaveCount(2); // None + 1 Doc
@@ -220,26 +218,26 @@ describe('fields - relationship', () => {
 
     test('should show id on relation in list view', async () => {
       await page.goto(url.list);
-      await wait(1000);
+      await wait(110);
-      const cells = page.locator('.relationship');
+      const cells = page.locator('.cell-relationship');
       const relationship = cells.nth(0);
       await expect(relationship).toHaveText(relationOneDoc.id);
     });
 
+    test('should show Untitled ID on restricted relation in list view', async () => {
+      await page.goto(url.list);
+      await wait(110);
+      const cells = page.locator('.cell-relationshipRestricted');
+      const relationship = cells.nth(0);
+      await expect(relationship).toContainText('Untitled - ID: ');
+    });
+
     test('should show useAsTitle on relation in list view', async () => {
       await page.goto(url.list);
-      wait(110);
+      await wait(110);
-      const cells = page.locator('.relationshipWithTitle');
+      const cells = page.locator('.cell-relationshipWithTitle');
       const relationship = cells.nth(0);
-      await expect(relationship).toHaveText(relationWithTitle.id);
+      await expect(relationship).toHaveText(relationWithTitle.name);
-    });
-
-    test('should show untitled ID on restricted relation in list view', async () => {
-      await page.goto(url.list);
-      wait(110);
-      const cells = page.locator('.relationship');
-      const relationship = cells.nth(0);
-      await expect(relationship).toHaveText(relationOneDoc.id);
     });
   });
 });

test/e2e/helpers.ts

@@ -17,9 +17,9 @@ export async function firstRegister(args: FirstRegisterArgs): Promise<void> {
   const { page, serverURL } = args;
 
   await page.goto(`${serverURL}/admin`);
-  await page.fill('#email', devUser.email);
+  await page.fill('#field-email', devUser.email);
-  await page.fill('#password', devUser.password);
+  await page.fill('#field-password', devUser.password);
-  await page.fill('#confirm-password', devUser.password);
+  await page.fill('#field-confirm-password', devUser.password);
   await wait(500);
   await page.click('[type=submit]');
   await page.waitForURL(`${serverURL}/admin`);
@@ -29,8 +29,8 @@ export async function login(args: LoginArgs): Promise<void> {
   const { page, serverURL } = args;
 
   await page.goto(`${serverURL}/admin`);
-  await page.fill('#email', devUser.email);
+  await page.fill('#field-email', devUser.email);
-  await page.fill('#password', devUser.password);
+  await page.fill('#field-password', devUser.password);
   await wait(500);
   await page.click('[type=submit]');
   await page.waitForURL(`${serverURL}/admin`);