fix(richtext-lexical): cursor kicked out of nested richtext while typing in a block (#16490)

AlessioGr · web-flow · commit 931a34954886 · 2026-05-05T09:43:36.000-07:00
Backports #16478
diff --git a/packages/richtext-lexical/src/features/blocks/client/component/index.tsx b/packages/richtext-lexical/src/features/blocks/client/component/index.tsx
@@ -24,7 +24,7 @@ import {
   useTranslation,
 } from '@payloadcms/ui'
 import { abortAndIgnore } from '@payloadcms/ui/shared'
-import { $getNodeByKey } from 'lexical'
+import { $getNodeByKey, SKIP_DOM_SELECTION_TAG } from 'lexical'
 import {
   type BlocksFieldClient,
   type ClientBlock,
@@ -269,15 +269,20 @@ export const BlockComponent: React.FC<BlockComponentProps> = (props) => {
         ) as BlockFields
 
         // Things like default values may come back from the server => update the node with the new data
-        editor.update(() => {
-          const node = $getNodeByKey(nodeKey)
-          if (node && $isBlockNode(node)) {
-            const newData = newFormStateData
-            newData.blockType = blockType
-
-            node.setFields(newData, true)
-          }
-        })
+        editor.update(
+          () => {
+            const node = $getNodeByKey(nodeKey)
+            if (node && $isBlockNode(node)) {
+              const newData = newFormStateData
+              newData.blockType = blockType
+
+              node.setFields(newData, true)
+            }
+          },
+          // Without this, the outer editor's reconciler resets DOM selection
+          // back into its own root, kicking focus out of any nested richText.
+          { tag: SKIP_DOM_SELECTION_TAG },
+        )
 
         setInitialState(state)
         if (!CustomLabelFromProps) {
@@ -377,14 +382,19 @@ export const BlockComponent: React.FC<BlockComponentProps> = (props) => {
       ) as BlockFields
 
       setTimeout(() => {
-        editor.update(() => {
-          const node = $getNodeByKey(nodeKey)
-          if (node && $isBlockNode(node)) {
-            const newData = newFormStateData
-            newData.blockType = blockType
-            node.setFields(newData, true)
-          }
-        })
+        editor.update(
+          () => {
+            const node = $getNodeByKey(nodeKey)
+            if (node && $isBlockNode(node)) {
+              const newData = newFormStateData
+              newData.blockType = blockType
+              node.setFields(newData, true)
+            }
+          },
+          // Without this, the outer editor's reconciler resets DOM selection
+          // back into its own root, kicking focus out of any nested richText.
+          { tag: SKIP_DOM_SELECTION_TAG },
+        )
       }, 0)
 
       if (submit) {
@@ -677,12 +687,17 @@ export const BlockComponent: React.FC<BlockComponentProps> = (props) => {
           onSubmit={(formState, newData) => {
             // This is only called when form is submitted from drawer - usually only the case if the block has a custom Block component
             newData.blockType = blockType
-            editor.update(() => {
-              const node = $getNodeByKey(nodeKey)
-              if (node && $isBlockNode(node)) {
-                node.setFields(newData as BlockFields, true)
-              }
-            })
+            editor.update(
+              () => {
+                const node = $getNodeByKey(nodeKey)
+                if (node && $isBlockNode(node)) {
+                  node.setFields(newData as BlockFields, true)
+                }
+              },
+              // Without this, the outer editor's reconciler resets DOM selection
+              // back into its own root, kicking focus out of any nested richText.
+              { tag: SKIP_DOM_SELECTION_TAG },
+            )
             toggleDrawer()
           }}
           submitted={submitted}
diff --git a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx
@@ -22,7 +22,7 @@ import {
   useTranslation,
 } from '@payloadcms/ui'
 import { abortAndIgnore } from '@payloadcms/ui/shared'
-import { $getNodeByKey } from 'lexical'
+import { $getNodeByKey, SKIP_DOM_SELECTION_TAG } from 'lexical'
 
 import './index.scss'
 
@@ -264,15 +264,20 @@ export const InlineBlockComponent: React.FC<InlineBlockComponentProps<InlineBloc
         ) as InlineBlockFields
 
         // Things like default values may come back from the server => update the node with the new data
-        editor.update(() => {
-          const node = $getNodeByKey(nodeKey)
-          if (node && $isInlineBlockNode(node)) {
-            const newData = newFormStateData
-            newData.blockType = formData.blockType
-
-            node.setFields(newData, true)
-          }
-        })
+        editor.update(
+          () => {
+            const node = $getNodeByKey(nodeKey)
+            if (node && $isInlineBlockNode(node)) {
+              const newData = newFormStateData
+              newData.blockType = formData.blockType
+
+              node.setFields(newData, true)
+            }
+          },
+          // Without this, the outer editor's reconciler resets DOM selection
+          // back into its own root, kicking focus out of any nested richText.
+          { tag: SKIP_DOM_SELECTION_TAG },
+        )
 
         setInitialState(state)
         if (!CustomLabelFromProps) {
@@ -392,12 +397,17 @@ export const InlineBlockComponent: React.FC<InlineBlockComponentProps<InlineBloc
     (formState: FormState, newData: Data) => {
       newData.blockType = formData.blockType
 
-      editor.update(() => {
-        const node = $getNodeByKey(nodeKey)
-        if (node && $isInlineBlockNode(node)) {
-          node.setFields(newData as InlineBlockFields, true)
-        }
-      })
+      editor.update(
+        () => {
+          const node = $getNodeByKey(nodeKey)
+          if (node && $isInlineBlockNode(node)) {
+            node.setFields(newData as InlineBlockFields, true)
+          }
+        },
+        // Without this, the outer editor's reconciler resets DOM selection
+        // back into its own root, kicking focus out of any nested richText.
+        { tag: SKIP_DOM_SELECTION_TAG },
+      )
     },
     [editor, nodeKey, formData],
   )
diff --git a/test/lexical/baseConfig.ts b/test/lexical/baseConfig.ts
@@ -14,6 +14,7 @@ import {
 } from './collections/Lexical/index.js'
 import { LexicalAccessControl } from './collections/LexicalAccessControl/index.js'
 import { LexicalAutosave } from './collections/LexicalAutosave/index.js'
+import { LexicalAutosaveBlock } from './collections/LexicalAutosaveBlock/index.js'
 import { LexicalBenchmark } from './collections/LexicalBenchmark/index.js'
 import { LexicalCustomCell } from './collections/LexicalCustomCell/index.js'
 import { LexicalHeadingFeature } from './collections/LexicalHeadingFeature/index.js'
@@ -73,6 +74,7 @@ export const baseConfig: Partial<Config> = {
     LexicalLocalizedFields,
     LexicalObjectReferenceBugCollection,
     LexicalInBlock,
+    LexicalAutosaveBlock,
     LexicalAccessControl,
     LexicalRelationshipsFields,
     LexicalSlugFieldNameCollision,
diff --git a/test/lexical/collections/LexicalAutosaveBlock/e2e.spec.ts b/test/lexical/collections/LexicalAutosaveBlock/e2e.spec.ts
@@ -0,0 +1,74 @@
+import { expect, test } from '@playwright/test'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+import type { PayloadTestSDK } from '../../../__helpers/shared/sdk/index.js'
+import type { Config } from '../../payload-types.js'
+
+import { ensureCompilationIsDone } from '../../../__helpers/e2e/helpers.js'
+import { AdminUrlUtil } from '../../../__helpers/shared/adminUrlUtil.js'
+import { initPayloadE2ENoConfig } from '../../../__helpers/shared/initPayloadE2ENoConfig.js'
+import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js'
+import { lexicalAutosaveBlockSlug } from '../../slugs.js'
+import { LexicalHelpers } from '../utils.js'
+
+const filename = fileURLToPath(import.meta.url)
+const currentFolder = path.dirname(filename)
+const dirname = path.resolve(currentFolder, '../../')
+
+let payload: PayloadTestSDK<Config>
+let serverURL: string
+
+const { beforeAll, beforeEach, describe } = test
+
+// Repro: when the parent collection has autosave enabled, every autosave
+// re-renders the outer richText, which unmounts/remounts the block decorator
+// containing the nested richText. The nested editor loses focus and any
+// characters typed after the autosave fires are dropped on the floor.
+describe('Lexical: nested richText loses focus on parent autosave', () => {
+  let lexical: LexicalHelpers
+
+  beforeAll(async ({ browser }, testInfo) => {
+    testInfo.setTimeout(TEST_TIMEOUT_LONG)
+    process.env.SEED_IN_CONFIG_ONINIT = 'false'
+    ;({ payload, serverURL } = await initPayloadE2ENoConfig<Config>({ dirname }))
+
+    const page = await browser.newPage()
+    await ensureCompilationIsDone({ page, serverURL })
+    await page.close()
+  })
+
+  beforeEach(async ({ page }) => {
+    const url = new AdminUrlUtil(serverURL, lexicalAutosaveBlockSlug)
+    lexical = new LexicalHelpers(page)
+    await page.goto(url.create)
+    await lexical.editor.first().focus()
+  })
+
+  test('typing in a nested richText keeps focus and retains characters across autosaves', async ({
+    page,
+  }) => {
+    await lexical.slashCommand('blockwithrichtext', true, 'Block With Rich Text')
+
+    await expect(lexical.editor).toHaveCount(2)
+
+    const nestedEditor = lexical.editor.nth(1)
+    await nestedEditor.click()
+
+    // Per-key delay > autosave interval (100ms) so autosave is guaranteed to
+    // fire between keystrokes. That is the timing that triggers the bug.
+    const typed = 'abcdefghij'
+    await page.keyboard.type(typed, { delay: 300 })
+
+    // Allow any in-flight autosave to settle so the focus state has converged.
+    await page.waitForTimeout(500)
+
+    await expect(nestedEditor).toHaveText(typed)
+
+    const isNestedFocused = await page.evaluate(() => {
+      const editors = document.querySelectorAll('[data-lexical-editor="true"]')
+      return document.activeElement === editors[1]
+    })
+    expect(isNestedFocused).toBe(true)
+  })
+})
diff --git a/test/lexical/collections/LexicalAutosaveBlock/index.ts b/test/lexical/collections/LexicalAutosaveBlock/index.ts
@@ -0,0 +1,40 @@
+import type { CollectionConfig } from 'payload'
+
+import { BlocksFeature, lexicalEditor } from '@payloadcms/richtext-lexical'
+
+import { lexicalAutosaveBlockSlug } from '../../slugs.js'
+
+export const LexicalAutosaveBlock: CollectionConfig = {
+  slug: lexicalAutosaveBlockSlug,
+  versions: {
+    drafts: {
+      autosave: {
+        interval: 100,
+      },
+    },
+  },
+  fields: [
+    {
+      name: 'content',
+      type: 'richText',
+      editor: lexicalEditor({
+        features: [
+          BlocksFeature({
+            blocks: [
+              {
+                slug: 'blockWithRichText',
+                fields: [
+                  {
+                    name: 'nestedRichText',
+                    type: 'richText',
+                    editor: lexicalEditor(),
+                  },
+                ],
+              },
+            ],
+          }),
+        ],
+      }),
+    },
+  ],
+}
diff --git a/test/lexical/payload-types.ts b/test/lexical/payload-types.ts
diff --git a/test/lexical/slugs.ts b/test/lexical/slugs.ts
