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



<!--

Thank you for the PR! Please go through the checklist below and make
sure you've completed all the steps.

Please review the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository if you haven't already.

The following items will ensure that your PR is handled as smoothly as
possible:

- PR Title must follow conventional commits format. For example, `feat:
my new feature`, `fix(plugin-seo): my fix`.
- Minimal description explained as if explained to someone not
immediately familiar with the code.
- Provide before/after screenshots or code diffs if applicable.
- Link any related issues/discussions from GitHub or Discord.
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Fixes #

-->

Author: GermanJablo

packages/richtext-lexical/src/features/relationship/client/drawer/index.tsx

@@ -80,12 +80,6 @@ const RelationshipDrawerComponent: React.FC<Props> = ({ 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 <ListDrawer onSelect={onSelect} />
 }
 

packages/richtext-slate/src/field/elements/relationship/Button/index.tsx

@@ -55,12 +55,6 @@ const RelationshipButtonComponent: React.FC<Props> = ({ 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 (
     <Fragment>
       <ListDrawerToggler>

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<ListDrawerProps> = ({
     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) => {

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)