Opened 6 years ago

Closed 5 years ago

#9934 closed Bug (duplicate)

CKEditor 4 in Twitter Bootstrap modal disables dropdowns in IE

Reported by: Matthew Leffler Owned by:
Priority: Normal Milestone:
Component: UI : Floating Panel Version: 3.0
Keywords: CantFix IE Cc:

Description

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.

Attachments (1)

FloatingPanelBug.html (1.1 KB) - added by Matthew Leffler 6 years ago.

Download all attachments as: .zip

Change History (13)

Changed 6 years ago by Matthew Leffler

Attachment: FloatingPanelBug.html added

comment:1 Changed 6 years ago by Matthew Leffler

Keywords: HasPatch added

Patch provided here.

comment:2 Changed 6 years ago by Jakub Ś

Status: newconfirmed
Version: 4.03.0

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.

Last edited 6 years ago by Jakub Ś (previous) (diff)

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

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

comment:5 Changed 6 years ago by Matthew Leffler

Keywords: HasPatch removed

@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?

comment:6 Changed 6 years ago by 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'))

comment:7 Changed 6 years ago by Jakub Ś

@mattleff thank you for your input.

comment:8 Changed 6 years ago by Jakub Ś

Keywords: CantFix added

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?

comment:9 Changed 6 years ago by Matthew Leffler

comment:10 Changed 5 years ago by Jakub Ś

Possible duplictate with possible solution: #12525.

comment:12 Changed 5 years ago by Jakub Ś

Resolution: duplicate
Status: confirmedclosed

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

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