Skip to content

Reactive forms, updateOn: 'blur' - control getting dirty when blurring despite no changes #410

@michael-koch787

Description

@michael-koch787

Create binding via reactive forms, set updateOn: blur.

formGroup = new FormGroup({
    control: new FormControl('text', { updateOn: 'blur' }),
  },
  { updateOn: 'blur' }
);

Focusing & blurring marks control as dirty despite no changes being made.
Example: https://stackblitz.com/edit/stackblitz-starters-tiunc5dt?file=src%2Fmain.ts

I think I found the cause:
If I create a FormControl with an initial value, that value is written to initalValue

public writeValue(value: string | null): void {
  if (this._editor && this._editor.initialized) {
    this._editor.setContent(isNullOrUndefined(value) ? '' : value);
  } else {
    this.initialValue = value === null ? undefined : value;
  }
}

Later in the initEditor method emitOnChange is called if an initialValue is set.
Therefore the control gets marked as dirty.

if (typeof this.initialValue === 'string') {
  this.ngZone.run(() => {
    editor.setContent(this.initialValue as string);
    if (editor.getContent() !== this.initialValue) {
      this.emitOnChange(editor);           // <- that's the problem I guess
    }
    if (this.onInitNgModel !== undefined) {
      this.onInitNgModel.emit(editor as unknown as EventObj<any>);
    }
  });
}

What is the expected behavior?
Control should not be marked as dirty.

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? Did this work in previous versions of TinyMCE or TinyMCE-Angular?
"@angular/core": "^19.0.0"
"@tinymce/tinymce-angular": "^8.0.1"

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