Skip to content

Placeholder doesn’t render on mount since v3.10.4 (autofocus guard removed init transaction) #7513

@KierynClipflow

Description

@KierynClipflow

Affected Packages

core, placeholder

Version(s)

3.10.4+

Bug Description

Use case:

We have a “New Project” modal. When it opens, the first field is “Project Title” (normal input with placeholder) and below it a Rich Text Editor for the project outline with placeholder “Add outline…”. The title placeholder is always visible. Since version 3.10.4 update outline placeholder is missing until the user clicks into the editor. We need the outline placeholder visible as soon as the modal opens so users see where to type.

What’s broken:

With the Placeholder extension and default options (no autofocus), the placeholder text does not render on initial mount. It appears only after the first interaction (e.g. clicking the editor).

Cause:

In v3.10.4 the autofocus guard was added in Editor.ts:

this.commands.focus(this.options.autofocus)
if (this.options.autofocus !== false && this.options.autofocus !== null) {
   this.commands.focus(this.options.autofocus)
}

When autofocus is false (the default), focus() is no longer called. That call was dispatching a transaction as a side effect, which triggered ProseMirror to compute plugin decorations (including Placeholder). Without it, the Placeholder’s decorations function doesn’t run until the first user interaction.

Steps to reproduce:

  1. Create an editor with the Placeholder extension, default options (no autofocus).
  2. Mount the editor.
  3. Placeholder is missing.
  4. Click in the editor → placeholder appears.

Expected:

Placeholder is visible as soon as the editor is mounted.

Actual:

Placeholder appears only after first interaction.

Affected:

v3.10.4+

Workaround:

Dispatch a no-op transaction in onCreate:

onCreate: ({ editor }) => {  setTimeout(() => {    if (!editor.isDestroyed) editor.view.dispatch(editor.state.tr)  }, 0)}

Suggested fix:

Either run an initial transaction after mount (e.g. in the same setTimeout(..., 0) as today) so decorations are computed once, or have the Placeholder (or core) ensure initial decorations are applied without depending on that focus path.

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

Placeholder is visible as soon as the editor is mounted.

Additional Context (Optional)

No response

Dependency Updates

  • Yes, I've updated all my dependencies.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Open SourceThe issue or pull reuqest is related to the open source packages of Tiptap.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions