From be84ad7bfa14d92e4bc780b644a7945249e8326f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Jablo=C3=B1ski?= <43938777+GermanJablo@users.noreply.github.com> Date: Fri, 3 Jan 2025 18:11:43 -0300 Subject: [PATCH] fix(ui): make relationship fields update the collection when it is changed in the drawer dropdown (#10338) To reproduce the bug: 1. Within a Lexical editor, insert a relationship field. 2. In the drawer, change the selected collection. 3. The table below changes correctly, but the title and the "create new" button quickly revert to the original option. https://github.com/user-attachments/assets/e4b7c615-4b98-4c11-a4b9-a828606edb6f --- .../relationship/client/drawer/index.tsx | 6 --- .../elements/relationship/Button/index.tsx | 6 --- .../src/elements/ListDrawer/DrawerContent.tsx | 22 ++++++----- .../collections/Lexical/e2e/main/e2e.spec.ts | 39 +++++++++++++++++++ 4 files changed, 52 insertions(+), 21 deletions(-) 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 97eecee120d..5f60d1667d4 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 e4ef03eb858..103b221a189 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 7c22f13366a..0b31d392f27 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 adb351f1120..d3809f080e3 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)