Skip to content

Updating content externally or using DynamicFormControlComponent causes the cursor to jump to the start #425

Description

@ZeroRex0126

Updating content externally or using DynamicFormControlComponent to update the value causes the cursor to jump to the start of the rich text editor. This issue also happens if there is another subscription firing to update the value somehow while typing

https://codesandbox.io/s/tinymce-angular-forked-sdwgoj

while typing it should not jump to the start, updating the value externally should not jump to the start, and after updating the value it should not jump to the start

Version 6.0.0 on Angular 13 and latest

Activity

  1. ZeroRex0126 commented on Aug 27, 2025

    @ZeroRex0126
    Author

    I have a fix, correct me if I am wrong, but since TinyMCE does the updating, the line " this._editor.setContent(isNullOrUndefined(value) ? '' : value);" is not needed and only needed for initialization.

    #425

  2. tiny-ben-tran commented on Feb 10, 2026

    @tiny-ben-tran
    Contributor

    @ZeroRex0126, I believe the line is needed. For example: it is still called when noteField is updated in your demo.

    while typing it should not jump to the start,

    This line this.formControl.patchValue(value, { emitEvent: false }); in your demo causes the cursor to jump to the start because it triggers the editor to update its content by calling this line this._editor.setContent(isNullOrUndefined(value) ? '' : value);".

    updating the value externally should not jump to the start, and after updating the value it should not jump to the start

    The editor internally maintains cursor/selection state during user interaction, but when setContent() is called (ie: triggered by external updates), it replaces the content and resets that internal selection state.

  3. ZeroRex0126 commented on Feb 10, 2026

    @ZeroRex0126
    Author

    Then, is there a way to update it and prevent it from jumping?

  4. tiny-ben-tran commented on Feb 17, 2026

    @tiny-ben-tran
    Contributor

    You can try to move the cursor using the editor selection API after the content has been updated. For example:

    editor.on('SetContent', (_e: any) => {
            const element = editor.getBody().querySelector('#aa');
            if (element) {
              console.log('found element with id "aa", moving cursor to it');
              editor.selection.setCursorLocation(element, 0);
            }
          });
    

    I assume it would be tricky to find where to insert the cursor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions