diff --git a/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx b/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx index 97eecee12..5f60d1667 100644 --- a/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx +++ b/packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx @@ -80,12 +80,6 @@ const RelationshipDrawerComponent: React.FC = ({ enabledCollectionSlugs } [editor, closeListDrawer, replaceNodeKey], ) - useEffect(() => { - // always reset back to first option - // TODO: this is not working, see the ListDrawer component - setSelectedCollectionSlug(enabledCollectionSlugs?.[0]) - }, [isListDrawerOpen, enabledCollectionSlugs]) - return } diff --git a/packages/richtext-slate/src/field/elements/relationship/Button/index.tsx b/packages/richtext-slate/src/field/elements/relationship/Button/index.tsx index e4ef03eb8..103b221a1 100644 --- a/packages/richtext-slate/src/field/elements/relationship/Button/index.tsx +++ b/packages/richtext-slate/src/field/elements/relationship/Button/index.tsx @@ -55,12 +55,6 @@ const RelationshipButtonComponent: React.FC = ({ enabledCollectionSlugs } [editor, closeDrawer], ) - useEffect(() => { - // always reset back to first option - // TODO: this is not working, see the ListDrawer component - setSelectedCollectionSlug(enabledCollectionSlugs[0]) - }, [isDrawerOpen, enabledCollectionSlugs]) - return ( diff --git a/packages/ui/src/elements/ListDrawer/DrawerContent.tsx b/packages/ui/src/elements/ListDrawer/DrawerContent.tsx index 7c22f1336..0b31d392f 100644 --- a/packages/ui/src/elements/ListDrawer/DrawerContent.tsx +++ b/packages/ui/src/elements/ListDrawer/DrawerContent.tsx @@ -7,6 +7,7 @@ import React, { useCallback, useEffect, useState } from 'react' import type { ListDrawerProps } from './types.js' import { useDocumentDrawer } from '../../elements/DocumentDrawer/index.js' +import { useIgnoredEffect } from '../../hooks/useIgnoredEffect.js' import { useConfig } from '../../providers/Config/index.js' import { useServerFunctions } from '../../providers/ServerFunctions/index.js' import { hoistQueryParamsToAnd } from '../../utilities/mergeListSearchAndWhere.js' @@ -58,15 +59,18 @@ export const ListDrawerContent: React.FC = ({ useDocumentDrawer({ collectionSlug: selectedOption.value, }) - - useEffect(() => { - if (selectedCollectionFromProps && selectedCollectionFromProps !== selectedOption?.value) { - setSelectedOption({ - label: collections.find(({ slug }) => slug === selectedCollectionFromProps).labels, - value: selectedCollectionFromProps, - }) - } - }, [selectedCollectionFromProps, collections, selectedOption]) + useIgnoredEffect( + () => { + if (selectedCollectionFromProps && selectedCollectionFromProps !== selectedOption?.value) { + setSelectedOption({ + label: collections.find(({ slug }) => slug === selectedCollectionFromProps).labels, + value: selectedCollectionFromProps, + }) + } + }, + [selectedCollectionFromProps], + [collections, selectedOption], + ) const renderList = useCallback( async (slug: string, query?: ListQuery) => { diff --git a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts index adb351f11..d3809f080 100644 --- a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts +++ b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts @@ -1179,6 +1179,45 @@ describe('lexicalMain', () => { }) }) + test('make relationship fields update the collection when it is changed in the drawer dropdown', async () => { + await navigateToLexicalFields() + const richTextField = page.locator('.rich-text-lexical').first() + await richTextField.scrollIntoViewIfNeeded() + await expect(richTextField).toBeVisible() + // Wait until there at least 10 blocks visible in that richtext field - thus wait for it to be fully loaded + await expect(page.locator('.rich-text-lexical').nth(2).locator('.lexical-block')).toHaveCount( + 10, + ) + await expect(page.locator('.shimmer-effect')).toHaveCount(0) + await richTextField.locator('.ContentEditable__root').first().click() + const lastParagraph = richTextField.locator('p').first() + await lastParagraph.scrollIntoViewIfNeeded() + await expect(lastParagraph).toBeVisible() + + await lastParagraph.click() + await page.keyboard.type('/Relationship') + const slashMenuPopover = page.locator('#slash-menu .slash-menu-popup') + await expect(slashMenuPopover).toBeVisible() + await page.keyboard.press('Enter') + + const relationshipInput = page.locator('.drawer__content .rs__input').first() + await expect(relationshipInput).toBeVisible() + await page.getByRole('heading', { name: 'Lexical Fields' }) + await relationshipInput.click() + const user = await page.getByRole('option', { name: 'User' }) + await user.click() + + const userListDrawer = page + .locator('div') + .filter({ hasText: /^User$/ }) + .first() + await expect(userListDrawer).toBeVisible() + await page.getByRole('heading', { name: 'Users' }) + const button = await page.getByLabel('Add new User') + await button.click() + await page.getByText('Creating new User') + }) + describe('localization', () => { test.skip('ensure simple localized lexical field works', async () => { await navigateToLexicalFields(true, true)