Opened 4 years ago

Last modified 3 years ago

#14524 confirmed Bug

[IE] Destroying CKEditor prevents following input from focus

Reported by: Dennis Jakobsen Owned by:
Priority: Normal Milestone:
Component: General Version: 4.0
Keywords: Support Cc:

Description

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.

Attachments (2)

abc.html (1.4 KB) - added by Jakub Ś 4 years ago.
index.html (1.8 KB) - added by Jakub Ś 4 years ago.

Download all attachments as: .zip

Change History (11)

comment:1 Changed 4 years ago by Jakub Ś

Status: newconfirmed
Version: 4.5.74.0

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.

Changed 4 years ago by Jakub Ś

Attachment: abc.html added

Changed 4 years ago by Jakub Ś

Attachment: index.html added

comment:2 in reply to:  1 Changed 3 years ago by 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()

comment:3 Changed 3 years ago by 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
...

comment:4 in reply to:  3 Changed 3 years ago by 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.

comment:5 Changed 3 years ago by Dennis Jakobsen

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

comment:6 Changed 3 years ago by 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.

comment:7 Changed 3 years ago by 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! :(

comment:8 Changed 3 years ago by Jakub Ś

Keywords: Support added

comment:9 Changed 3 years ago by 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?

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy