Blur event does not fire on FIRST blur of inline editor

[Rick]

Creating new inline editor instances using CKEDITOR.inline() on an element, the editor instance is created and starts up correctly. The cursor appears in the editable area and I can make changes.

The first time I click out of the editor and change focus to something else on the page, the editor does not fire it's blur event and the editor UI does not disappear (though the contentEditable border around the element does disappear).

If I then click back into the editor and click out again, everything works as expected -- blur event fires and editor UI disappears.

This happens for each instance of an editor on the page. One exception is that if I click from one inline editor to another, then the first one DOES blur as expected.

This issue has been noted previously in the forums, i.e. here:

​http://ckeditor.com/forums/CKEditor/Registered-blur-event-doesnt-fire-the-first-time-it-seems-that-it-should-see-details

[Rick]

I have created a test case illustrating this issue. I have tested this in multiple browsers and both windows and mac and behavior is consistent:

​https://www.weboom.com/rick/ck_test1.html

The above URL illustrates the unexpected behavior: Editor is created when div is clicked by calling CKEDITOR.inline() in a click handler applied to the div. Editor appears and is functional, but the first time you defocus it the editor UI does not go away and blur is not called. If you defocus it a second time, everything works as expected. Specifically, click the div, make changes, and then click somewhere else on the page. Editor will not correctly defocus. Click into it again and out again and all is well.

Here is a very similar page that works correctly. The difference is that the editor is being created when the page loads, by calling exactly the same method as above, CKEDITOR.inline():

​https://www.weboom.com/rick/ck_test2.html

So, the difference is that in the first one, CKEDITOR.inline() is called from within a click handler function, and in the second one, CKEDITOR.inline() is called when the page loads.

[Piotrek Koszuliński]

Thanks for the detailed bug report. I confirm the issue. If editable element is already focused while editor is created, then blur is not fired after editor is blurred.

[Piotrek Koszuliński]

I pushed ​branch:t/11647 which fixes the issue, but it needs tests still.

[Piotrek Koszuliński]

I pushed tests in ​branch:t/11647. I couldn't run them on IEs.

[Artur Delura]

Anywhere I click on editable, caret is always at the end of first paragraph in provided example. And when I start typing then content is added at the very end of editable. I think we should remember selection as well and apply it to editable while creating CKEditor instance. Or at least report issue.

If we create standard CKEditor instance (not inline) using replace method then editor is not focused at all. Wwhen we fix use case described above this one should be fixed autimatically as well.

[Piotrek Koszuliński]

Replying to a.delura:

Anywhere I click on editable, caret is always at the end of first paragraph in provided example. And when I start typing then content is added at the very end of editable. I think we should remember selection as well and apply it to editable while creating CKEditor instance. Or at least report issue.

That's hard and it's not part of this ticket at all. It's only about blur and focus.

[Artur Delura]

Ommiting use cases listed above - everything looks fine. IE8 and IE9 works well.

[Piotrek Koszuliński]

Merged to master with ​git:1794e56.