fix: remounts document drawer when single-value relationship changes

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

@@ -2,7 +2,7 @@ import React, { createContext, useContext, useEffect, useRef, useState } from 'r
 import { useModal } from '@faceless-ui/modal';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
-import { Props, DocumentTogglerProps } from './types';
+import { Props, DocumentTogglerProps, IDocumentDrawerContext } from './types';
 import DefaultEdit from '../../views/collections/Edit/Default';
 import X from '../../icons/X';
 import { Fields } from '../../forms/Form/types';
@@ -174,14 +174,10 @@ export const DocumentDrawer: React.FC<Props> = ({
   return null;
 };
 
-export type IDocumentDrawerContext = {
-  DocumentDrawer: React.FC<Props>,
-  DocumentDrawerToggler: React.FC<DocumentTogglerProps>
-}
-
 export const DocumentDrawerContext = createContext({
   DocumentDrawer,
   DocumentDrawerToggler,
+  formatDocumentDrawerSlug,
 });
 
 export const useDocumentDrawer = (): IDocumentDrawerContext => useContext(DocumentDrawerContext);

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

@@ -15,3 +15,14 @@ export type DocumentTogglerProps = HTMLAttributes<HTMLButtonElement> & {
   className?: string
   uuid?: string
 }
+
+export type IDocumentDrawerContext = {
+  DocumentDrawer: React.FC<Props>,
+  DocumentDrawerToggler: React.FC<DocumentTogglerProps>
+  formatDocumentDrawerSlug: (props: {
+    collection: string,
+    id: string,
+    depth: number,
+    uuid?: string,
+  }) => string,
+}

src/admin/components/elements/ReactSelect/SingleValue/index.tsx

@@ -4,6 +4,7 @@ import { useDocumentDrawer } from '../../DocumentDrawer';
 import Edit from '../../../icons/Edit';
 import { Option } from '../../../forms/field-types/Relationship/types';
 import './index.scss';
+import { useDrawerDepth } from '../../Drawer';
 
 const baseClass = 'single-value';
 
@@ -17,7 +18,8 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
     children,
   } = props;
 
-  const { DocumentDrawer, DocumentDrawerToggler } = useDocumentDrawer();
+  const drawerDepth = useDrawerDepth();
+  const { DocumentDrawer, DocumentDrawerToggler, formatDocumentDrawerSlug } = useDocumentDrawer();
   const uuid = useId();
 
   return (
@@ -43,6 +45,13 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
       </div>
       {relationTo && (
         <DocumentDrawer
+          // use `key` to force the drawer to re-mount when the value changes
+          key={formatDocumentDrawerSlug({
+            collection: relationTo,
+            id: value.toString(),
+            depth: drawerDepth,
+            uuid,
+          })}
           collection={relationTo}
           id={value.toString()}
           uuid={uuid}