From 392fd9e9b083b08e68a822f1b74a813055e0ace7 Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Tue, 16 Sep 2025 17:15:47 -0700 Subject: [PATCH 1/4] fix the issue --- packages/ui/src/elements/ConfirmationModal/index.tsx | 2 ++ packages/ui/src/elements/DocumentLocked/index.tsx | 2 ++ packages/ui/src/elements/DocumentTakeOver/index.tsx | 7 ++++++- packages/ui/src/elements/Drawer/index.tsx | 2 ++ packages/ui/src/elements/FullscreenModal/index.tsx | 2 ++ packages/ui/src/fields/Relationship/Input.tsx | 6 +----- 6 files changed, 15 insertions(+), 6 deletions(-) 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) { From 69215db8b35186e9e9d2c0756b27fa282abdedca Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Tue, 16 Sep 2025 17:16:06 -0700 Subject: [PATCH 2/4] work on test --- .../collections/_LexicalFullyFeatured/index.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) 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', + }, + }, + ], + }, ], }), ], From 33536e7a183f24b44d7e5280ea9c5ad26f3b4b02 Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Tue, 16 Sep 2025 18:01:48 -0700 Subject: [PATCH 3/4] e2e test --- .../_LexicalFullyFeatured/e2e.spec.ts | 22 +++++++++++++++++++ test/lexical/collections/utils.ts | 4 ++-- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts b/test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts index 94624071369..548be118d8d 100644 --- a/test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts +++ b/test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts @@ -130,4 +130,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/utils.ts b/test/lexical/collections/utils.ts index 867acafeed9..c373e9a1263 100644 --- a/test/lexical/collections/utils.ts +++ b/test/lexical/collections/utils.ts @@ -98,8 +98,8 @@ export class LexicalHelpers { async slashCommand( // prettier-ignore - command: 'block' | 'check' | 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' |'h6' | 'inline' - | 'link' | 'ordered' | 'paragraph' | 'quote' | 'relationship' | 'unordered' | 'upload', + command: ('block' | 'check' | 'code' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' |'h6' | 'inline' + | 'link' | 'ordered' | 'paragraph' | 'quote' | 'relationship' | 'unordered' | 'upload') | ({} & string), ) { await this.page.keyboard.press(`/`) From 36ae6ec1deac5f4024cfefd1549158f9da77c10e Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Wed, 24 Sep 2025 13:47:57 -0700 Subject: [PATCH 4/4] fix test --- test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts | 2 +- test/lexical/collections/utils.ts | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts b/test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts index 660a09ea905..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) 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() }