tinymce-angular icon indicating copy to clipboard operation
tinymce-angular copied to clipboard

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

Open michael-koch787 opened this issue 1 year ago • 0 comments

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"

michael-koch787 avatar Jan 13 '25 15:01 michael-koch787