CKEditor 4 in Twitter Bootstrap modal disables dropdowns in IE

[Matthew Leffler]

Summary:

When viewing CKEditor 4 in a Twitter Bootstrap modal using IE, the floating panel does not remain open, but immediately closes.

Steps:

1. In IE (confirmed in IE8, IE9), open the sample attached file and click "Launch Modal."
2. Select the Normal or Styles dropdown.

Expected Result:

The floating panel should open, allowing selection of menu items.

Actual Result:

The floating panel immediately opens and closes.

[Matthew Leffler]

Patch provided ​here.

[Jakub Ś]

Problem can be reproduced from CKEditor 3.0 in both versions 3.x and 4.x (v4) in all versions of IE.

@mattleff are you sure this plugin works (Does it solve problem mentioned in this ticket)? I have tried it in IE9, IE10 and dropdowns were still showing for a moment, longer moment but still moment.

---

NOTE:We have similar tickets concerning modal dialogs and IE - #8137, #7078, #7175. I'm mentioning them because there might be one fix for all of them.

[Matthew Leffler]

@j.swiderski I was using a non-built (ie, from source) CKEditor for my testing and this patch seemed to work for IE8 under those conditions. Since then I built CKEditor using a patched source and CKBuilder and that did not seem to work in IE8. The last comment on #7175 would seem to indicate that that was not the right patch.

From my testing I can fix this issue by returning at line 201 in plugins/floatpanel/plugin.js (obviously that breaks other things). For some reason the blur event is getting called directly after the menu is shown.

[Jakub Ś]

Since then I built CKEditor using a patched source and CKBuilder and that did not seem to work in IE8. The last comment on #7175 would seem to indicate that that was not the right patch.

I'm not sure how to understand this.

@mattleff I didn't expect that your patch will fix all of these issues. Since my previous post might sound confusing I have changed it a little bit.
My question was concerning this particular TC. Are you sure that your patch works for this particular TC? I have tried it this patch on IE9 and IE10 and dropdowns were still flickering. That is why I have asked.

[Matthew Leffler]

@j.swiderski No, my patch does not seem to be working. My comment about #7175 was that Garry's patch didn't work for that ticket (per Wiktor) and I basically applied Garry's patch to the current HEAD with a few, small changes. I'll remove HasPatch from this ticket. Do you have any ideas for a fix?

[Matthew Leffler]

@j.swiderski I've found the source of this issue: Bootstrap was listening to focusin events within the modal to enforce focus within the modal. If the event's target wasn't a descendent of the modal it was sending a focus() event to the modal. Because the iframe isn't a child of the modal focus() gets throw to the modal. So whenever the panel was shown, the click would cause Bootstrap to trigger focus() on the modal which would trigger the blur() code in CKEditor and close the menu.

Now, this does not happen in non-IE browsers. I'm wondering if event propagation prevention for IE would fix this issue. I'm not enough of a JS wiz to know how to test this theory so I'll leave that to you. For now I'm going to hack a fix into the Bootstrap JS.

The relevant part of Bootstrap JS is ​here. My fix looks like this:

if (that.$element[0] !== e.target && !that.$element.has(e.target).length && !$(e.target.parentNode).hasClass('cke'))

[Jakub Ś]

@mattleff thank you for your input.

[Jakub Ś]

Bootstrap was listening to focusin events within the modal to enforce focus within the modal. If the event's target wasn't a descendent of the modal it was sending a focus() event to the modal.

After having second look at this issue all I can say is - this is not CKEditor issue. This problem should be reported to twitter bootstrap. We can't do anything about this bug.

@mattleff could you please report this issue to twitter and leave link to ticket here?

[Matthew Leffler]

@j.swiderski Here's the issue: ​https://github.com/twitter/bootstrap/issues/6996

[Jakub Ś]

Possible duplictate with possible solution: #12525.

[pittlu]

The solution:
​http://dev.ckeditor.com/ticket/12525#comment:4

[Jakub Ś]

I'm closing this issue in favour of #12525. Please check it out for solution.