fix(ui): opening relationship field with appearance: "drawer" inside rich text inline block closes drawer

packages/ui/src/elements/ConfirmationModal/index.tsx

@@ -69,6 +69,8 @@ export function ConfirmationModal(props: ConfirmationModalProps) {
   return (
     <Modal
       className={[baseClass, className].filter(Boolean).join(' ')}
+      // Fixes https://github.com/payloadcms/payload/issues/13778
+      closeOnBlur={false}
       slug={modalSlug}
       style={{
         zIndex: drawerZBase + editDepth,

packages/ui/src/elements/DocumentLocked/index.tsx

@@ -51,6 +51,8 @@ export const DocumentLocked: React.FC<{
   return (
     <Modal
       className={baseClass}
+      // Fixes https://github.com/payloadcms/payload/issues/13778
+      closeOnBlur={false}
       onClose={() => {
         startRouteTransition(() => handleGoBack())
       }}

packages/ui/src/elements/DocumentTakeOver/index.tsx

@@ -29,7 +29,12 @@ export const DocumentTakeOver: React.FC<{
   }, [isActive, openModal, closeModal])
 
   return (
-    <Modal className={baseClass} slug={modalSlug}>
+    <Modal
+      className={baseClass}
+      // // Fixes https://github.com/payloadcms/payload/issues/13778
+      closeOnBlur={false}
+      slug={modalSlug}
+    >
       <div className={`${baseClass}__wrapper`}>
         <div className={`${baseClass}__content`}>
           <h1>{t('general:editingTakenOver')}</h1>

packages/ui/src/elements/Drawer/index.tsx

@@ -79,6 +79,8 @@ export const Drawer: React.FC<Props> = ({
           ]
             .filter(Boolean)
             .join(' ')}
+          // Fixes https://github.com/payloadcms/payload/issues/13778
+          closeOnBlur={false}
           slug={slug}
           style={{
             zIndex: drawerZBase + drawerDepth,

packages/ui/src/elements/FullscreenModal/index.tsx

@@ -11,6 +11,8 @@ export function FullscreenModal(props: Parameters<typeof ModalType>[0]) {
 
   return (
     <Modal
+      // Fixes https://github.com/payloadcms/payload/issues/13778
+      closeOnBlur={false}
       {...props}
       style={{
         ...(props.style || {}),

packages/ui/src/fields/Relationship/Input.tsx

@@ -788,11 +788,7 @@ export const RelationshipInput: React.FC<RelationshipInputProps> = (props) => {
               }}
               onMenuOpen={() => {
                 if (appearance === 'drawer') {
-                  // TODO: This timeout is only necessary for inline blocks in the lexical editor
-                  // and when the devtools are closed. Temporary solution, we can probably do better.
-                  setTimeout(() => {
-                    openListDrawer()
-                  }, 100)
+                  openListDrawer()
                 } else if (appearance === 'select') {
                   setMenuIsOpen(true)
                   if (!hasLoadedFirstPageRef.current) {

test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts

@@ -45,7 +45,7 @@ describe('Lexical Fully Featured', () => {
   test('prevent extra paragraph when inserting decorator blocks like blocks or upload node', async () => {
     await lexical.slashCommand('block')
     await expect(lexical.editor.locator('.lexical-block')).toBeVisible()
-    await lexical.slashCommand('relationship')
+    await lexical.slashCommand('relationship', true, 'Relationship')
     await lexical.drawer.locator('.list-drawer__header').getByText('Create New').click()
     await lexical.save('drawer')
     await expect(lexical.decorator).toHaveCount(2)
@@ -129,4 +129,26 @@ describe('Lexical Fully Featured', () => {
     const someButton = dropdownItems!.locator(`[data-item-key="bg-red"]`)
     await expect(someButton).toHaveAttribute('aria-disabled', 'false')
   })
+
+  test('ensure opening relationship field with appearance: "drawer" inside rich text inline block does not close drawer', async ({
+    page,
+  }) => {
+    // https://github.com/payloadcms/payload/pull/13830
+
+    await lexical.slashCommand('inlineblockwithrelationship')
+
+    await expect(lexical.drawer).toBeVisible()
+
+    await lexical.drawer.locator('.react-select').click()
+    // At this point, the drawer would close if the issue is not fixed
+
+    await page.getByText('Seeded text document').click()
+
+    await expect(
+      lexical.drawer.locator('.react-select .relationship--single-value__text'),
+    ).toHaveText('Seeded text document')
+
+    await lexical.drawer.getByText('Save changes').click()
+    await expect(lexical.drawer).toBeHidden()
+  })
 })

test/lexical/collections/_LexicalFullyFeatured/index.ts

@@ -57,6 +57,20 @@ export const LexicalFullyFeatured: CollectionConfig = {
                   },
                 ],
               },
+              {
+                slug: 'inlineBlockWithRelationship',
+                fields: [
+                  {
+                    name: 'relationship',
+                    type: 'relationship',
+                    relationTo: 'text-fields',
+                    admin: {
+                      // Required to reproduce issue: https://github.com/payloadcms/payload/issues/13778
+                      appearance: 'drawer',
+                    },
+                  },
+                ],
+              },
             ],
           }),
         ],

test/lexical/collections/utils.ts

@@ -191,14 +191,19 @@ export class LexicalHelpers {
     command: ('block' | 'check' | 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' |'h6' | 'inline'
     | 'link' | 'ordered' | 'paragraph' | 'quote' | 'relationship' | 'table' | 'unordered'|'upload') | ({} & string),
     expectMenuToClose = true,
+    labelToMatch?: string,
   ) {
     await this.page.keyboard.press(`/`)
 
     const slashMenuPopover = this.page.locator('#slash-menu .slash-menu-popup')
     await expect(slashMenuPopover).toBeVisible()
     await this.page.keyboard.type(command)
     await wait(200)
-    await this.page.keyboard.press(`Enter`)
+    if (labelToMatch) {
+      await slashMenuPopover.getByText(labelToMatch).click()
+    } else {
+      await this.page.keyboard.press(`Enter`)
+    }
     if (expectMenuToClose) {
       await expect(slashMenuPopover).toBeHidden()
     }