diff --git a/src/admin/components/elements/DocumentDrawer/index.scss b/src/admin/components/elements/DocumentDrawer/index.scss
index 3429ec342f..665daf7f96 100644
--- a/src/admin/components/elements/DocumentDrawer/index.scss
+++ b/src/admin/components/elements/DocumentDrawer/index.scss
@@ -24,8 +24,10 @@
   &__toggler {
     background: transparent;
     border: 0;
+    margin: 0;
     padding: 0;
     cursor: pointer;
+    color: inherit;
 
     &:focus,
     &:focus-within {
diff --git a/src/admin/components/elements/ListDrawer/index.scss b/src/admin/components/elements/ListDrawer/index.scss
index d4f14946b7..814da1443a 100644
--- a/src/admin/components/elements/ListDrawer/index.scss
+++ b/src/admin/components/elements/ListDrawer/index.scss
@@ -41,6 +41,7 @@
     border: 0;
     padding: 0;
     cursor: pointer;
+    color: inherit;
 
     &:focus,
     &:focus-within {
@@ -56,6 +57,7 @@
     border: 0;
     background-color: transparent;
     padding: 0;
+    margin: 0;
     cursor: pointer;
     overflow: hidden;
     width: base(1);
diff --git a/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss b/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss
index 66a9470d55..234b556624 100644
--- a/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss
+++ b/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss
@@ -24,6 +24,7 @@
     align-items: center;
     justify-content: center;
     margin-left: base(0.25);
+    pointer-events: all;
 
     .icon {
       width: base(0.75);
diff --git a/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss b/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss
index 0b29ca4f03..a19adfe26c 100644
--- a/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss
+++ b/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss
@@ -25,6 +25,7 @@
     align-items: center;
     justify-content: center;
     margin-left: base(0.25);
+    pointer-events: all;
 
     .icon {
       width: base(0.75);
diff --git a/src/admin/components/forms/field-types/RichText/RichText.tsx b/src/admin/components/forms/field-types/RichText/RichText.tsx
index ccb31afdae..4c87207894 100644
--- a/src/admin/components/forms/field-types/RichText/RichText.tsx
+++ b/src/admin/components/forms/field-types/RichText/RichText.tsx
@@ -205,9 +205,8 @@ const RichText: React.FC<Props> = (props) => {
     function setClickableState(clickState: 'disabled' | 'enabled') {
       const selectors = 'button, a, [role="button"]';
       const toolbarButtons: (HTMLButtonElement | HTMLAnchorElement)[] = toolbarRef.current?.querySelectorAll(selectors);
-      const editorButtons: (HTMLButtonElement | HTMLAnchorElement)[] = editorRef.current?.querySelectorAll(selectors);
 
-      [...(toolbarButtons || []), ...(editorButtons || [])].forEach((child) => {
+      (toolbarButtons || []).forEach((child) => {
         const isButton = child.tagName === 'BUTTON';
         const isDisabling = clickState === 'disabled';
         child.setAttribute('tabIndex', isDisabling ? '-1' : '0');
diff --git a/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss b/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss
index 02c1fa02e3..2586ac446c 100644
--- a/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss
+++ b/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.scss
@@ -49,46 +49,42 @@
     outline: none;
   }
 
-  &__toggler {
-    background: transparent;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-
-    &:focus,
-    &:focus-within {
-      outline: none;
-    }
-
-    &:disabled {
-      pointer-events: none;
-    }
-  }
-
   &__actions {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     margin-left: base(0.5);
 
+    .rich-text-relationship__doc-drawer-toggler {
+      pointer-events: all;
+    }
+
     & > *:not(:last-child) {
       margin-right: base(.25);
     }
   }
 
-  &__actionButton {
+  &__removeButton {
     margin: 0;
-    border-radius: 0;
-    flex-shrink: 0;
-    width: base(1);
-    height: base(1);
 
     line {
       stroke-width: $style-stroke-width-m;
     }
 
     &:disabled {
-      opacity: 0.5;
+      color: var(--theme-elevation-300);
+      pointer-events: none;
+    }
+  }
+
+  &__doc-drawer-toggler,
+  &__list-drawer-toggler {
+    & > * {
+      margin: 0;
+    }
+
+    &:disabled {
+      color: var(--theme-elevation-300);
       pointer-events: none;
     }
   }
diff --git a/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.tsx b/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.tsx
index 2a23e8d81f..8079e357c9 100644
--- a/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.tsx
+++ b/src/admin/components/forms/field-types/RichText/elements/relationship/Element/index.tsx
@@ -28,9 +28,13 @@ const Element: React.FC<{
     attributes,
     children,
     element,
+    element: {
+      relationTo,
+      value,
+    },
     fieldProps,
   } = props;
-  const { relationTo, value } = element;
+
   const { collections, serverURL, routes: { api } } = useConfig();
   const [enabledCollectionSlugs] = useState(() => collections.filter(({ admin: { enableRichTextRelationship } }) => enableRichTextRelationship).map(({ slug }) => slug));
   const [relatedCollection, setRelatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
@@ -146,30 +150,27 @@ const Element: React.FC<{
       </div>
       <div className={`${baseClass}__actions`}>
         {value?.id && (
-          <DocumentDrawerToggler
-            className={`${baseClass}__toggler`}
-            disabled={fieldProps?.admin?.readOnly}
-          >
+          <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
             <Button
               icon="edit"
               round
               buttonStyle="icon-label"
               el="div"
-              className={`${baseClass}__actionButton`}
               onClick={(e) => {
                 e.preventDefault();
               }}
               tooltip={t('general:editLabel', { label: getTranslation(relatedCollection.labels.singular, i18n) })}
-              disabled={fieldProps?.admin?.readOnly}
             />
           </DocumentDrawerToggler>
         )}
-        <ListDrawerToggler disabled={fieldProps?.admin?.readOnly}>
+        <ListDrawerToggler
+          disabled={fieldProps?.admin?.readOnly}
+          className={`${baseClass}__list-drawer-toggler`}
+        >
           <Button
             icon="swap"
             round
             buttonStyle="icon-label"
-            className={`${baseClass}__actionButton`}
             onClick={() => {
             // do nothing
             }}
@@ -182,7 +183,7 @@ const Element: React.FC<{
           icon="x"
           round
           buttonStyle="icon-label"
-          className={`${baseClass}__actionButton`}
+          className={`${baseClass}__removeButton`}
           onClick={(e) => {
             e.preventDefault();
             removeRelationship();
diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
index 408202a9ad..92aa62665e 100644
--- a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
+++ b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss
@@ -62,33 +62,37 @@
     flex-shrink: 0;
     margin-left: base(0.5);
 
+    .rich-text-upload__doc-drawer-toggler {
+      pointer-events: all;
+    }
+
     & > *:not(:last-child) {
       margin-right: base(.25);
     }
   }
 
-  &__actionButton {
+  &__removeButton {
     margin: 0;
-    border-radius: 0;
-    flex-shrink: 0;
 
     line {
       stroke-width: $style-stroke-width-m;
     }
 
     &:disabled {
-      opacity: 0.5;
+      color: var(--theme-elevation-300);
       pointer-events: none;
     }
   }
 
-  &__toggler {
-    background: transparent;
-    border: none;
-    padding: 0;
-    &:focus,
-    &:focus-within {
-      outline: none;
+  &__doc-drawer-toggler,
+  &__list-drawer-toggler {
+    & > * {
+      margin: 0;
+    }
+
+    &:disabled {
+      color: var(--theme-elevation-300);
+      pointer-events: none;
     }
   }
 
diff --git a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
index b8d24ffbb1..77edcb9b24 100644
--- a/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
+++ b/src/admin/components/forms/field-types/RichText/elements/upload/Element/index.tsx
@@ -26,12 +26,17 @@ const Element: React.FC<{
   children: React.ReactNode
   element: any
   fieldProps: RichTextProps
-}> = ({ attributes, children, element }) => {
+}> = (props) => {
   const {
-    relationTo,
-    value,
+    attributes,
+    children,
+    element,
+    element: {
+      relationTo,
+      value,
+    },
     fieldProps,
-  } = element;
+  } = props;
 
   const { collections, serverURL, routes: { api } } = useConfig();
   const { t, i18n } = useTranslation('fields');
@@ -159,27 +164,27 @@ const Element: React.FC<{
             </div>
             <div className={`${baseClass}__actions`}>
               {value?.id && (
-                <DocumentDrawerToggler className={`${baseClass}__toggler`}>
+                <DocumentDrawerToggler className={`${baseClass}__doc-drawer-toggler`}>
                   <Button
                     icon="edit"
                     round
                     buttonStyle="icon-label"
                     el="div"
-                    className={`${baseClass}__actionButton`}
                     onClick={(e) => {
                       e.preventDefault();
                     }}
                     tooltip={t('general:editLabel', { label: relatedCollection.labels.singular })}
-                    disabled={fieldProps?.admin?.readOnly}
                   />
                 </DocumentDrawerToggler>
               )}
-              <ListDrawerToggler>
+              <ListDrawerToggler
+                className={`${baseClass}__list-drawer-toggler`}
+                disabled={fieldProps?.admin?.readOnly}
+              >
                 <Button
                   icon="swap"
                   round
                   buttonStyle="icon-label"
-                  className={`${baseClass}__actionButton`}
                   onClick={() => {
                     // do nothing
                   }}
@@ -192,7 +197,7 @@ const Element: React.FC<{
                 icon="x"
                 round
                 buttonStyle="icon-label"
-                className={`${baseClass}__actionButton`}
+                className={`${baseClass}__removeButton`}
                 onClick={(e) => {
                   e.preventDefault();
                   removeUpload();
diff --git a/test/fields-relationship/config.ts b/test/fields-relationship/config.ts
index 9da0bb0640..5eac1086be 100644
--- a/test/fields-relationship/config.ts
+++ b/test/fields-relationship/config.ts
@@ -110,6 +110,14 @@ export default buildConfig({
           type: 'text',
           name: 'filter',
         },
+        {
+          name: 'relationshipReadOnly',
+          type: 'relationship',
+          relationTo: relationOneSlug,
+          admin: {
+            readOnly: true,
+          },
+        },
       ],
     },
     {
@@ -245,7 +253,7 @@ export default buildConfig({
       },
     });
     // Create docs to relate to
-    const { id: relationOneDocId } = await payload.create<RelationOne>({
+    const { id: relationOneDocId } = await payload.create({
       collection: relationOneSlug,
       data: {
         name: relationOneSlug,
@@ -254,7 +262,7 @@ export default buildConfig({
 
     const relationOneIDs: string[] = [];
     await mapAsync([...Array(11)], async () => {
-      const doc = await payload.create<RelationOne>({
+      const doc = await payload.create({
         collection: relationOneSlug,
         data: {
           name: relationOneSlug,
@@ -265,7 +273,7 @@ export default buildConfig({
 
     const relationTwoIDs: string[] = [];
     await mapAsync([...Array(11)], async () => {
-      const doc = await payload.create<RelationTwo>({
+      const doc = await payload.create({
         collection: relationTwoSlug,
         data: {
           name: relationTwoSlug,
@@ -275,15 +283,17 @@ export default buildConfig({
     });
 
     // Existing relationships
-    const { id: restrictedDocId } = await payload.create<RelationRestricted>({
+    const { id: restrictedDocId } = await payload.create({
       collection: relationRestrictedSlug,
       data: {
         name: 'relation-restricted',
       },
     });
+
     const relationsWithTitle: string[] = [];
+
     await mapAsync(['relation-title', 'word boundary search'], async (title) => {
-      const { id } = await payload.create<RelationWithTitle>({
+      const { id } = await payload.create({
         collection: relationWithTitleSlug,
         data: {
           name: title,
@@ -291,7 +301,8 @@ export default buildConfig({
       });
       relationsWithTitle.push(id);
     });
-    await payload.create<FieldsRelationship>({
+
+    await payload.create({
       collection: slug,
       data: {
         relationship: relationOneDocId,
@@ -300,7 +311,7 @@ export default buildConfig({
       },
     });
     await mapAsync([...Array(11)], async () => {
-      await payload.create<FieldsRelationship>({
+      await payload.create({
         collection: slug,
         data: {
           relationship: relationOneDocId,
@@ -312,16 +323,18 @@ export default buildConfig({
         },
       });
     });
+
     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>({
+      await payload.create({
         collection: slug,
         data: {
           relationship: relationOneDocId,
           relationshipRestricted: restrictedDocId,
           relationshipHasMany: [relationOneID],
           relationshipHasManyMultiple: [{ relationTo: relationTwoSlug, value: relationTwoID }],
+          relationshipReadOnly: relationOneID,
         },
       });
     });
diff --git a/test/fields-relationship/e2e.spec.ts b/test/fields-relationship/e2e.spec.ts
index 99a97770f7..40bd3df14c 100644
--- a/test/fields-relationship/e2e.spec.ts
+++ b/test/fields-relationship/e2e.spec.ts
@@ -46,21 +46,21 @@ describe('fields - relationship', () => {
     await clearAllDocs();
 
     // Create docs to relate to
-    relationOneDoc = await payload.create<RelationOne>({
+    relationOneDoc = await payload.create({
       collection: relationOneSlug,
       data: {
         name: 'relation',
       },
     });
 
-    anotherRelationOneDoc = await payload.create<RelationOne>({
+    anotherRelationOneDoc = await payload.create({
       collection: relationOneSlug,
       data: {
         name: 'relation',
       },
     });
 
-    relationTwoDoc = await payload.create<RelationTwo>({
+    relationTwoDoc = await payload.create({
       collection: relationTwoSlug,
       data: {
         name: 'second-relation',
@@ -68,7 +68,7 @@ describe('fields - relationship', () => {
     });
 
     // Create restricted doc
-    restrictedRelation = await payload.create<RelationRestricted>({
+    restrictedRelation = await payload.create({
       collection: relationRestrictedSlug,
       data: {
         name: 'restricted',
@@ -76,7 +76,7 @@ describe('fields - relationship', () => {
     });
 
     // Doc with useAsTitle
-    relationWithTitle = await payload.create<RelationWithTitle>({
+    relationWithTitle = await payload.create({
       collection: relationWithTitleSlug,
       data: {
         name: 'relation-title',
@@ -84,7 +84,7 @@ describe('fields - relationship', () => {
     });
 
     // Doc with useAsTitle for word boundary test
-    await payload.create<RelationWithTitle>({
+    await payload.create({
       collection: relationWithTitleSlug,
       data: {
         name: 'word boundary search',
@@ -92,13 +92,14 @@ describe('fields - relationship', () => {
     });
 
     // Add restricted doc as relation
-    docWithExistingRelations = await payload.create<CollectionWithRelationships>({
+    docWithExistingRelations = await payload.create({
       collection: slug,
       data: {
         name: 'with-existing-relations',
         relationship: relationOneDoc.id,
         relationshipRestricted: restrictedRelation.id,
         relationshipWithTitle: relationWithTitle.id,
+        relationshipReadOnly: relationOneDoc.id,
       },
     });
   });
@@ -216,13 +217,13 @@ describe('fields - relationship', () => {
   });
 
   test('should allow usage of relationTo in filterOptions', async () => {
-    const { id: include } = await payload.create<RelationOne>({
+    const { id: include } = await payload.create({
       collection: relationOneSlug,
       data: {
         name: 'include',
       },
     });
-    const { id: exclude } = await payload.create<RelationOne>({
+    const { id: exclude } = await payload.create({
       collection: relationOneSlug,
       data: {
         name: 'exclude',
@@ -240,7 +241,7 @@ describe('fields - relationship', () => {
   });
 
   test('should allow usage of siblingData in filterOptions', async () => {
-    await payload.create<RelationOne>({
+    await payload.create({
       collection: relationWithTitleSlug,
       data: {
         name: 'exclude',
@@ -259,6 +260,18 @@ describe('fields - relationship', () => {
     await expect(options).not.toContainText('exclude');
   });
 
+  test('should open document drawer from read-only relationships', async () => {
+    await page.goto(url.edit(docWithExistingRelations.id));
+
+    const field = page.locator('#field-relationshipReadOnly');
+
+    const button = await field.locator('button.relationship--single-value__drawer-toggler.doc-drawer__toggler');
+    await button.click();
+
+    const documentDrawer = await page.locator('[id^=doc-drawer_relation-one_1_]');
+    await expect(documentDrawer).toBeVisible();
+  });
+
   describe('existing relationships', () => {
     test('should highlight existing relationship', async () => {
       await page.goto(url.edit(docWithExistingRelations.id));
diff --git a/test/fields/collections/RichText/index.ts b/test/fields/collections/RichText/index.ts
index 845adc4a7e..4e11eba61c 100644
--- a/test/fields/collections/RichText/index.ts
+++ b/test/fields/collections/RichText/index.ts
@@ -100,6 +100,20 @@ const RichTextFields: CollectionConfig = {
       type: 'richText',
       admin: {
         readOnly: true,
+        elements: [
+          'h1',
+          'h2',
+          'h3',
+          'h4',
+          'h5',
+          'h6',
+          'ul',
+          'ol',
+          'indent',
+          'link',
+          'relationship',
+          'upload',
+        ],
         link: {
           fields: [
             {
diff --git a/test/fields/config.ts b/test/fields/config.ts
index 16737a27f7..08f82cf540 100644
--- a/test/fields/config.ts
+++ b/test/fields/config.ts
@@ -110,6 +110,7 @@ export default buildConfig({
 
     const richTextRelationshipIndex = richTextDocWithRelationship.richText.findIndex(({ type }) => type === 'relationship');
     richTextDocWithRelationship.richText[richTextRelationshipIndex].value = { id: createdTextDoc.id };
+    richTextDocWithRelationship.richTextReadOnly[richTextRelationshipIndex].value = { id: createdTextDoc.id };
 
     const richTextUploadIndex = richTextDocWithRelationship.richText.findIndex(({ type }) => type === 'upload');
     richTextDocWithRelationship.richText[richTextUploadIndex].value = { id: createdJPGDoc.id };
diff --git a/test/fields/e2e.spec.ts b/test/fields/e2e.spec.ts
index 2c7c3334dc..aac9a66dac 100644
--- a/test/fields/e2e.spec.ts
+++ b/test/fields/e2e.spec.ts
@@ -452,6 +452,28 @@ describe('fields', () => {
         await expect(editLinkModal).toBeHidden();
       });
 
+      test('should open uploads drawer from read-only field', async () => {
+        navigateToRichTextFields();
+        const field = await page.locator('#field-richTextReadOnly');
+        const button = await field.locator('button.rich-text-upload__doc-drawer-toggler.doc-drawer__toggler');
+
+        await button.click();
+
+        const documentDrawer = await page.locator('[id^=doc-drawer_uploads_1_]');
+        await expect(documentDrawer).toBeVisible();
+      });
+
+      test('should open relationship drawer from read-only field', async () => {
+        navigateToRichTextFields();
+        const field = await page.locator('#field-richTextReadOnly');
+        const button = await field.locator('button.rich-text-relationship__doc-drawer-toggler.doc-drawer__toggler');
+
+        await button.click();
+
+        const documentDrawer = await page.locator('[id^=doc-drawer_text-fields_1_]');
+        await expect(documentDrawer).toBeVisible();
+      });
+
       test('should populate new links', async () => {
         navigateToRichTextFields();