If used with reactive Forms, disabled property can run into "changed after checked" errors

tim-boerner commented 4 years ago

What is the current behavior? If the Editor is used with reactive Forms together with the disabled property. It can happen, that the disabled state is not correctly processed at the editor, if the value changed during editor initialization. There is also a warning logged at console.

minimal demo codesandbox.io

What is the expected behavior? Maybe it is possible to support the disabled property at FormControl, like it is stated at the warning new FormControl({value: 'some Text', disabled: true}, Validators.required)

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? TinyMCE 5.2.0 TinyMCE-Angular 3.3.1 Chrome Browser

SimonFc commented 4 years ago

Setting the editor to readonly mode via the disabled option for the FormControl should actually work so this is a bug. Thanks for finding this! We want tinymce-angular to work well with reactive forms

Edit: to add to the above, using the disabled property for the FormControl will probably fix the "changed after checked" error.

tim-boerner commented 4 years ago

Yes the i think/hope so. I updated the codesandbox where disabled property of FormControl is used and is not working

ikismail commented 4 years ago

+1 facing same issue

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? TinyMCE 5.4.1 TinyMCE-Angular 4.1.0 Chrome Browser

LHBruneton-C2C commented 3 years ago

+1 facing same issue

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? TinyMCE 5.6.1 TinyMCE-Angular 4.2.0 Chrome Browser

pbarranis commented 3 years ago

I am running into the same issue, but if you don't mind an off-topic question, how are you all finding the version of TinyMCE you're running? If you have the package @tinymce/tinymce-angular, then I don't see how you find the version of the editor (not the Angular wrapper). Even going into Chrome sources and looking at cdn.tiny.cloud/.../5/tinymce.min.js doesn't have a standard version comment header at the top like every other library I'm using (something Tiny really should fix, IMO). Certainly I'm missing something obvious?

Thanks, and sorry for the off-topic question, but this really doesn't warrant a whole Stack Overflow question, I don't think.

LHBruneton-C2C commented 3 years ago

For my part, I simply looked into package-lock.json.

pbarranis commented 3 years ago

@LHBruneton-C2C Thanks, but when I open that and search for "tiny", I only get this one result. What's in yours?

LHBruneton-C2C commented 3 years ago

It's a really large file, but regarding tinymce, here's what I have :

"@tinymce/tinymce-angular": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/@tinymce/tinymce-angular/-/tinymce-angular-4.2.0.tgz",
      "integrity": "sha512-/idOKItFVUvxilCrTi36x6MI7r/4YuSr77fkg4efPSu7t2u1SADIfLTSF1K1RB+3ZUvy8zWB2v5kqbgD4FchNQ==",
      "requires": {
        "tslib": "^1.10.0"
      },
      "dependencies": {
        "tslib": {
          "version": "1.14.1",
          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
        }
      }
    },

"tinymce": {
      "version": "5.6.1",
      "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-5.6.1.tgz",
      "integrity": "sha512-gLtuSk3VH5P36wYOxrkjKvLnPnuNRZ77t2fjTMz95ASnd5FsTBCLadnr8YKcWrBommFQoSzmVlTDyR7gXgR3nw=="
    },

I don't know how package-lock.json is build. Maybe it depends on npm version.

NZE commented 3 years ago

+1 facing same issue

Which versions of TinyMCE/TinyMCE-Angular, and which browser / OS are affected by this issue? TinyMCE 5.8.1 TinyMCE-Angular 4.2.4 Chrome Browser 91.0.4472.101

exalate-issue-sync[bot] commented 3 years ago

Ref: INT-2576

liesahead commented 3 years ago

Any plans on addressing this issue? Shouldn't it be trivial? At least we have similar angular wrapper for codemirror editor where we have implementation to support disabled state via form controls and it is quite trivial (code in screenshot below).

Do you need some help and someone (maybe even me) can create a pull request for fixing this?

jscasca commented 2 years ago

@liesahead feel free to open a PR at any time if you can help with this issue. Unfortunately, I haven't been able to look into it.

danoaky-tiny commented 9 months ago

This issue has since been fixed, see: https://codesandbox.io/p/devbox/int-2576-9jhh9v If any issues persist, feel free to reopen a new issue.

tinymce / tinymce-angular

If used with reactive Forms, disabled property can run into "changed after checked" errors #142