question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ValueChanges should not emit when editor is initialized if value did not change

See original GitHub issue

What is the current behavior?

Currently, the valueChanges Observable for a reactive forms FormControl bound to a tiny mce editor will emit when the tiny mce editor inits, even if the value in the control did not change. I can see why valueChanges emits here, as initializing the editor may add markup that changes the value (e.g. "Hello" turns into "<p>Hello</p>"). However, for me this is not desirable behavior if the value passed in already contains markup and isn’t changed by the editor initializing (e.g. if the FormControl already has the value "<p>Hello</p>").

See this minimal repro on stackblitz - note that "<p>Hi</p>" is logged to the console twice.

What is the expected behavior?

"<p>Hi</p>" is logged to the console once.

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?

This is using v4.0.0. I haven’t used previous version of the official Angular component - in the past I’ve rolled my own wrapper element with tinymce core 4.x, but I decided to try this component rather than update my wrapper to use 5.x.

Other notes

There seems to be a fairly simple fix for this: within the initEditor method, before calling this.onChangeCallback, check if this.initialValue is equal to editor.getContent({ format: this.outputFormat }), and don’t call onChangeCallback if they are equal.

That said, I can see that this is technically a breaking change, but would be more than happy if the above behavior is optional (e.g. there is a new emitValueChangeOnInitIfEqual angular @Input which defaults to true, and does the check suggested above if false is passed).

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
blovell33commented, Jul 31, 2020

This is likely the issue that is affecting me as well.

Seems like this example…

<editor [(ngModel)]="model.foo" [init]="init()" name="foo"></editor>

…is always setting the ngModel state to dirty even when on init the form should be in a pristine state until changes in the editor are made. I’m having to set init_instance_callback to use a function that sets the form to pristine after the editor is loaded. This sort of works, however the user can also type into the editor before the ngModel binding takes place and this is randomly throwing errors in our app when a user does this.

The behavior should be that when a form is loaded it is still in a pristine state after the initial editor ngModel binding. Everything that I’m seeing would suggest otherwise.

1reaction
jscascacommented, Sep 17, 2020

So this should be the default behaviour in 4.2.0. No reason to trigger a change event if the value didn’t change on initialization of the editor.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to not emit event while editing a Form Control value in ...
If emitEvent is true, this change will cause a valueChanges event on the FormControl to be emitted. This defaults to true (as it...
Read more >
How to not trigger value changes when editing a FormControl ...
Solution. To avoid the valuechanges to go off we can use the following options: this.input.setValue(selectedDropDownItem, {emitEvent:false});.
Read more >
Change event is not triggered with ReactiveForms | Angular
Value changed in the Initialization so the change event was not triggered, this is the intended behavior of the component.
Read more >
ValueChanges in Angular Forms - TekTutorialsHub
The ValueChanges is an event raised by the Angular forms whenever the value of the FormControl, FormGroup, or FormArray changes.
Read more >
FormControl - Angular
Resets the form control, marking it pristine and untouched , and resetting the value. The new value will be the provided value (if...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found