Skip to content

Caret jumps to wrong position when decorate callback changes from async state update #5987

@dannelundqvist

Description

@dannelundqvist

Description
When the decorate function is regenerated due to async state updates (e.g., from a debounced onChange or setTimeout), the editor loses track of the current caret position and it jumps to an incorrect location.

Recording
Image

Sandbox
https://codesandbox.io/p/sandbox/nervous-dijkstra-djm6j7

Steps

  1. Place caret at end of text
  2. Type a word that matches decoration criteria (e.g., "there")
  3. Wait for async state update (2 seconds in example)
  4. Observe caret jumps to wrong position when decorations apply

Expectation
Caret should remain at current position.

Environment

  • Slate Version: 0.120.0
  • Operating System: MacOS Tahoe 26.1
  • Browser: Chrome

Context
It is possible to work around in a very hackish way by storing the selection, then wait 10 ms (0 ms does not work) and then restore the selection to ensure slate rerenders correctly.

const selection = editor.selection
ReactEditor.deselect(editor)
setTimeout(() => {
  if (selection) {
    Transforms.select(editor, selection)
  }
}, 10)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions