[IE] Destroying CKEditor prevents following input from focus

[Dennis Jakobsen]

Steps to reproduce

1. Visit my plnkr here: ​http://embed.plnkr.co/LeTskAqj785Ic9dD2O6y/
2. type something in CKEDITOR, press next
3. click the input

Expected result

Input should receive focus

Actual result

No input is achieved

Other details (browser, OS, CKEditor version, installed plugins)

IE 9-11, Windows 10, CKEditor 4.5.1 - 4.5.7, plugins from standard cdn distro

In this limited scenario, you can gain focus if you keep clicking the input, but on heavier pages, the input will never gain focus.

[Jakub Ś]

As a workaround please use id on input and add focus to it $("#myfocus").focus();

I'm attaching two samples - one with jQuery and the other without it. Both produce same problem.

[Dennis Jakobsen]

Replying to j.swiderski:

As a workaround please use id on input and add focus to it $("#myfocus").focus();

I'm attaching two samples - one with jQuery and the other without it. Both produce same problem.

Not sure what you are getting out of it, but i'm not seeing any change to my plnkr using id or .focus()

[Jakub Ś]

I couldn't load embed.plnkr.co on IE11 but i could load it on any Edge and any other modern browser. The below works as expected:

...
<div style="display: none;" id="param2">
        <h3>input</h3>
        <label>
          <input id="myinput"/> <!--HERE-->
        </label>
...
 $("#next").on("click", function(){
            // and destruction, things go awry in IE 9, 10, 11
            CKEDITOR.instances.txtarea.destroy();
           $("#param1").hide();
           $("#param2").show();
           $("#myinput").focus(); // HERE
...

[Dennis Jakobsen]

Replying to j.swiderski:

I couldn't load embed.plnkr.co on IE11 but i could load it on any Edge and any other modern browser. The below works as expected:

...
<div style="display: none;" id="param2">
        <h3>input</h3>
        <label>
          <input id="myinput"/> <!--HERE-->
        </label>
...
 $("#next").on("click", function(){
            // and destruction, things go awry in IE 9, 10, 11
            CKEDITOR.instances.txtarea.destroy();
           $("#param1").hide();
           $("#param2").show();
           $("#myinput").focus(); // HERE
...

Ah, yes, but this only works for regular inputs. If i have a jqui .selectmenu() or .datepicker() it doesn't. I don't want them to auto pop.

[Dennis Jakobsen]

Is there a chance anyone will ever look into this or should i just wait for people to stop using IE?

[Jakub Ś]

This unfortunately isn't high priority issue for us thus we won't be working on it in the near future. You are however welcome to work on it and provide a pull request for it.

Please check this plunk - ​https://plnkr.co/edit/qB3Y0ZxUY0vdxRrTNjQJ. I have played with CKEditor it has worked for me in almost all cases. Sometimes i needed to click twice but in most cases it has worked ok. Please tell me if it is working for you or not.

You could also extend the first workaround and perhaps focus/hide the date picker. Additionally, you could so it off the screen and then mode the input to view port.

[Dennis Jakobsen]

I just tested in IE11 quickly and nothing happened after 5 clicks.. i tabbed around a bit, tried to focus and type, then 5 seconds later it finally focused and started typing. Not a workaround at all. I'll have to put a warning message to my users that focus can take 10 seconds or more! :(

[Dennis Jakobsen]

Hi,

I tried using the .inline() editor instead which works and has no .destroy() issues, but since we are in a dialog and using inline(), it makes a floating toolbar and overshadows the title.

We can force the toolbar to always be displayed, but again, we are in a dialog and if we move the dialog, the toolbar sticks to the absolute position, until i click the editable content again.

Will you please reconsider fixing this issue?

If not, provide an inline editor without floating (non-sticky) toolbars?