fix: updates relationship label on drawer save and prevents stepnav update

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useReducer, useRef, useState } from 'react';
 import { useModal } from '@faceless-ui/modal';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
@@ -20,6 +20,7 @@ import formatFields from '../../views/collections/Edit/formatFields';
 import { useRelatedCollections } from '../../forms/field-types/Relationship/AddNew/useRelatedCollections';
 import IDLabel from '../IDLabel';
 import { useEditDepth } from '../../utilities/EditDepth';
+
 import './index.scss';
 
 const baseClass = 'doc-drawer';
@@ -64,7 +65,7 @@ export const DocumentDrawer: React.FC<DocumentDrawerProps> = ({
   collectionSlug,
   id,
   drawerSlug,
-  onSave,
+  onSave: onSaveFromProps,
   customHeader,
 }) => {
   const { serverURL, routes: { api } } = useConfig();
@@ -83,7 +84,8 @@ export const DocumentDrawer: React.FC<DocumentDrawerProps> = ({
     setFields(formatFields(collectionConfig, true));
   }, [collectionSlug, collectionConfig]);
 
-  const [{ data, isLoading: isLoadingDocument, isError }] = usePayloadAPI(
+  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0); // used to rerun the API call even though the URL hasn't changed
+  const [{ data, isLoading: isLoadingDocument, isError }, { setParams }] = usePayloadAPI(
     (id ? `${serverURL}${api}/${collectionSlug}/${id}` : null),
     { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } },
   );
@@ -121,6 +123,17 @@ export const DocumentDrawer: React.FC<DocumentDrawerProps> = ({
     }
   }, [isError, t, isOpen, data, drawerSlug, closeModal, isLoadingDocument]);
 
+  const onSave = useCallback((args: { doc: any, message: string }) => {
+    setParams({ 'fallback-locale': 'null', depth: 0, draft: 'true', cacheBust });
+    dispatchCacheBust();
+    if (typeof onSaveFromProps === 'function') {
+      onSaveFromProps({
+        ...args,
+        collectionConfig,
+      });
+    }
+  }, [onSaveFromProps, cacheBust, setParams, collectionConfig]);
+
   if (isError) return null;
 
   if (isOpen) {

src/admin/components/elements/DocumentDrawer/types.ts

@@ -1,9 +1,14 @@
 import React, { HTMLAttributes } from 'react';
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
 
 export type DocumentDrawerProps = {
   collectionSlug: string
   id?: string
-  onSave?: (json: Record<string, unknown>) => void
+  onSave?: (args: {
+    doc: Record<string, any>
+    collectionConfig: SanitizedCollectionConfig
+    message: string,
+  }) => void
   customHeader?: React.ReactNode
   drawerSlug?: string
 }

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

@@ -25,6 +25,7 @@ import { findOptionsByValue } from './findOptionsByValue';
 import { GetFilterOptions } from './GetFilterOptions';
 import { SingleValue } from './select-components/SingleValue';
 import { MultiValueLabel } from './select-components/MultiValueLabel';
+import { DocumentDrawerProps } from '../../../elements/DocumentDrawer/types';
 
 import './index.scss';
 
@@ -300,6 +301,10 @@ const Relationship: React.FC<Props> = (props) => {
     setHasLoadedFirstPage(false);
   }, [relationTo, filterOptionsResult]);
 
+  const onSave = useCallback<DocumentDrawerProps['onSave']>((args) => {
+    dispatchOptions({ type: 'UPDATE', doc: args.doc, collection: args.collectionConfig, i18n });
+  }, [i18n]);
+
   const classes = [
     'field-type',
     baseClass,
@@ -383,6 +388,7 @@ const Relationship: React.FC<Props> = (props) => {
               disableMouseDown: drawerIsOpen,
               disableKeyDown: drawerIsOpen,
               setDrawerIsOpen,
+              onSave,
             }}
             onMenuOpen={() => {
               if (!hasLoadedFirstPage) {

src/admin/components/forms/field-types/Relationship/optionsReducer.ts

@@ -29,6 +29,22 @@ const optionsReducer = (state: OptionGroup[], action: Action): OptionGroup[] =>
       return [];
     }
 
+    case 'UPDATE': {
+      const { collection, doc, i18n } = action;
+      const relation = collection.slug;
+      const newOptions = [...state];
+      const labelKey = collection.admin.useAsTitle || 'id';
+      const foundOptionGroup = newOptions.find((optionGroup) => optionGroup.label === collection.labels.plural);
+      const foundOption = foundOptionGroup?.options?.find((option) => option.value === doc.id);
+
+      if (foundOption) {
+        foundOption.label = doc[labelKey] || `${i18n.t('general:untitled')} - ID: ${doc.id}`;
+        foundOption.relationTo = relation;
+      }
+
+      return newOptions;
+    }
+
     case 'ADD': {
       const { collection, docs, sort, ids = [], i18n } = action;
       const relation = collection.slug;

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

@@ -20,6 +20,7 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
     selectProps: {
       setDrawerIsOpen,
       draggableProps,
+      onSave,
     },
   } = props;
 
@@ -65,7 +66,7 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
             </Tooltip>
             <Edit />
           </DocumentDrawerToggler>
-          <DocumentDrawer />
+          <DocumentDrawer onSave={onSave} />
         </Fragment>
       )}
     </div>

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

@@ -21,6 +21,7 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
     selectProps: {
       selectProps: {
         setDrawerIsOpen,
+        onSave,
       },
     },
   } = props;
@@ -69,7 +70,7 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
         </SelectComponents.SingleValue>
       </div>
       {relationTo && hasReadPermission && (
-        <DocumentDrawer />
+        <DocumentDrawer onSave={onSave} />
       )}
     </div>
   );

src/admin/components/forms/field-types/Relationship/types.ts

@@ -28,6 +28,13 @@ type CLEAR = {
   type: 'CLEAR'
 }
 
+type UPDATE = {
+  type: 'UPDATE'
+  doc: any
+  collection: SanitizedCollectionConfig
+  i18n: typeof i18n
+}
+
 type ADD = {
   type: 'ADD'
   docs: any[]
@@ -37,7 +44,7 @@ type ADD = {
   i18n: typeof i18n
 }
 
-export type Action = CLEAR | ADD
+export type Action = CLEAR | ADD | UPDATE
 
 export type ValueWithRelation = {
   relationTo: string

src/admin/components/views/collections/Edit/Default.tsx

@@ -94,11 +94,13 @@ const DefaultEditView: React.FC<Props> = (props) => {
             disabled={!hasSavePermission}
             initialState={initialState}
           >
-            <SetStepNav
-              collection={collection}
-              isEditing={isEditing}
-              id={data.id}
-            />
+            {!disableEyebrow && (
+              <SetStepNav
+                collection={collection}
+                isEditing={isEditing}
+                id={data.id}
+              />
+            )}
             <div className={`${baseClass}__main`}>
               <Meta
                 title={`${isEditing ? t('editing') : t('creating')} - ${getTranslation(collection.labels.singular, i18n)}`}