diff --git a/packages/ui/src/elements/ConfirmationModal/index.tsx b/packages/ui/src/elements/ConfirmationModal/index.tsx index 6cbd4648478..8bf296b0215 100644 --- a/packages/ui/src/elements/ConfirmationModal/index.tsx +++ b/packages/ui/src/elements/ConfirmationModal/index.tsx @@ -69,6 +69,8 @@ export function ConfirmationModal(props: ConfirmationModalProps) { return ( { startRouteTransition(() => handleGoBack()) }} diff --git a/packages/ui/src/elements/DocumentTakeOver/index.tsx b/packages/ui/src/elements/DocumentTakeOver/index.tsx index 28f33364711..2597fd7ac27 100644 --- a/packages/ui/src/elements/DocumentTakeOver/index.tsx +++ b/packages/ui/src/elements/DocumentTakeOver/index.tsx @@ -29,7 +29,12 @@ export const DocumentTakeOver: React.FC<{ }, [isActive, openModal, closeModal]) return ( - +

{t('general:editingTakenOver')}

diff --git a/packages/ui/src/elements/Drawer/index.tsx b/packages/ui/src/elements/Drawer/index.tsx index 64354d077b5..6d9b60d1b32 100644 --- a/packages/ui/src/elements/Drawer/index.tsx +++ b/packages/ui/src/elements/Drawer/index.tsx @@ -79,6 +79,8 @@ export const Drawer: React.FC = ({ ] .filter(Boolean) .join(' ')} + // Fixes https://github.com/payloadcms/payload/issues/13778 + closeOnBlur={false} slug={slug} style={{ zIndex: drawerZBase + drawerDepth, diff --git a/packages/ui/src/elements/FullscreenModal/index.tsx b/packages/ui/src/elements/FullscreenModal/index.tsx index c9775fa2d88..9df2c41ea6b 100644 --- a/packages/ui/src/elements/FullscreenModal/index.tsx +++ b/packages/ui/src/elements/FullscreenModal/index.tsx @@ -11,6 +11,8 @@ export function FullscreenModal(props: Parameters[0]) { return ( = (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) { diff --git a/test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts b/test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts index 1742be995ad..d956554dfc6 100644 --- a/test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts +++ b/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() + }) }) diff --git a/test/lexical/collections/_LexicalFullyFeatured/index.ts b/test/lexical/collections/_LexicalFullyFeatured/index.ts index 187cf6ad31c..6a042e325a6 100644 --- a/test/lexical/collections/_LexicalFullyFeatured/index.ts +++ b/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', + }, + }, + ], + }, ], }), ], diff --git a/test/lexical/collections/utils.ts b/test/lexical/collections/utils.ts index 9f5d2bdaffc..90b3433fb65 100644 --- a/test/lexical/collections/utils.ts +++ b/test/lexical/collections/utils.ts @@ -191,6 +191,7 @@ 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(`/`) @@ -198,7 +199,11 @@ export class LexicalHelpers { 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() }