Ngx-quill: quill loses selected text in IE after color change or font family change

[ShadowQueen]

Angular CLI: 1.6.5
Node: 8.9.1
OS: win32 x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.17
typescript: 2.6.2
webpack: 3.10.0
"ngx-quill": "2.2.0"

Hello,

I have noticed one strange behavior in IE browser. Steps for reproducing the issue:

1. Open the quill editor in IE
2. Type some text, for example - ngx-quill is a very nice library.
3. Now select the words "very nice" in the sentence and try to color this words in say green color.
4. Somehow quill loses selection and nothing happens.

5. The same thing happens if I try to change font family.

   In Chrom and Mozilla everything is working like a charm. In IE this only works if I choose color or font family first and then type the text.

   Any idea how to fix this issue?

Thank you.

[KillerCodeMonkey]

could you check if this is a general quilljs error?
in quilljs.com example editor.
It sounds more like a general quill issue. If so, open this issue there:
https://github.com/quilljs/quill/issues

[ShadowQueen]

Of course. It's not a general quilljs error.
I have tried in IE 11 with https://quilljs.com/playground/#quill-playground
Unfortunately, I can not open your demo-page in IE 11.

[KillerCodeMonkey]

strange i did no change anything for that. And unfortunatly i do not have a test device for IE ;). Never tried it with Edge or IE11.

My demo-repo is missing some polyfills - so it is not working in IE11.

Maybe you can investigate the problem and send me a PR

[ShadowQueen]

Ok. I will try.
I need to clone the project and investigate the code.
I will get back to you...

[ShadowQueen]

Hello,
I have investigated the code a little bit. And you don't have missing polyfills in your demo-repo.
In IE 11 demo-repo has this error: SCRIPT1002: Syntax error.
https://user-images.githubusercontent.com/16406109/38859537-8566fe42-422e-11e8-948f-b1922eda43af.png
Also, I have notified quill about this issue and they just said next thing:

IE11 is a supported browser for use, but not local development as some of the tools used require more modern browser features.

Selection is lost every time if the user uses the drop-down button in the toolbar. This is my workaround:
I have add (onEditorCreated)="editorInit($event)"

    editorInit(quill) {
        // console.log(quill);
        quill.root.addEventListener('blur', e => quill.setSelection(null));
        quill.focus();
    }

Now the selected text dose not lose the focus.
Please close this bug, this was a more quill issue as you suggested at first. I am sorry, I was not able to fix demo-repo. Maybe this issue will help someone.

Thank you

[KillerCodeMonkey]

please do not say sorry for trying to make things better ;)