Blur and Focus events are unpredictable (and therefore unusable)

[Nora]

I'm using outputHTML (in case that matters) and wanted to put in placeholder text in the CKEditor on blur and then remove it on focus. However, clicking in the CKEditor was not consistently firing the focus event and clicking outside was not consistently firing the blur event. I tried capturing blur from the editor, the document, the iFrame, and no combination would always fire focus when I clicked in and always fire blur when I clicked out.

[Piotrek Koszuliński]

1. What is outputHTML?
2. How do you put placeholder text? Could you share some code?
3. On which browsers and how exactly are you testing this?

To be able to verify your bug report I need to have very precise answers. Especially if you use non-editable elements (with contenteditable="false") browsers can make you a lot of problems with focus/blur because they are very buggy here.

[Jakub Ś]

What is outputHTML?

This is probably outputHtml sample

@norabora we have some issues with focus/blur events:
​http://dev.ckeditor.com/ticket/10483
​http://dev.ckeditor.com/ticket/10345
​http://dev.ckeditor.com/ticket/10439

1. Could you check if this is one of the issues?
2. If not could you please provide simplified HTML file that will show this problem?

I'm talking about something that can be put samples folder, will work and show the problem.

[Nora]

custom/messageEntry_config.js

[Nora]

A1. j.swiderski is correct. I only mention it because in another bug I filed, that turned out to be the cause so I just wanted to make sure that's known straight off.

A2. Sure.

config : {
    extraPlugins : "insertReference,,upload,enterBehavior",
    toolbar: [
        { name: 'basicstyles',  items : [ 'Bold','Italic','Underline','-','RemoveFormat' ] },
        { name: 'links',        items : [ 'Link','Unlink','-','InsertReference'] },
        { name: 'upload',       items : [ 'Upload' ] }
    ],
    height: '60px'
},
setupCKEditorInstance: function() {
    var config = {
       customConfig : 'custom/messageEntry_config.js',
       language : I18N.getLocale().replace(/_/g, '-'),
       extraPlugins : this.config.extraPlugins,
       toolbar : this.config.toolbar,
       height : this.config.height
    };

    this.editor = CKEDITOR.replace(this.$(this.id)[0], config);
    this.editor.on("instanceReady", function() {
        if(this.model.isMessage() && this.editor.readonly) {
            this.showPropmtText();
        }
    }, this);
    this.editor.on("contentDom", this.setupCKEditorEventHandlers);
},
/*
 * Various combinations of the following blur and focus listeners were used
 */
setupCKEditorEventHandlers: function() {
    this.editor.editable().on('focus', this.focusHandler);
    this.editor.editable().on('blur', this.blurHandler);
    this.editor.document.on('click', this.focusHandler);
    this.editor.document.on('focus', this.focusHandler);
    this.editor.document.on('blur', this.blurHandler);
    this.$el.on('blur', this.blurHandler);
    this.editor.on('focus', this.focusHandler);
    this.editor.on('blur', this.blurHandler);
    this.editor.on('insertText', this.blurAfterPromptTextInsert);
},
focusHandler: function(event) {
    if(this.isPromptText()) {
        $(this.editor.document.$).find('body').removeClass('promptText');
        this.editor.setData("");
    }
},
blurHandler: function(event) {
    if(this.model.isMessage() && this.editor.getSnapshot() === "") {
        this.showPromptText();
    }
},
showPromptText: function() {
    this.editor.insertText(this.options.promptText);
},
blurAfterPromptTextInsert: function() {
    $(this.editor.document.$).find('body').addClass('promptText');
    this.editor.focusManager.blur();
},
isPromptText: function() {
    var editorText = this.editor.getSnapshot().replace(/<br\s*[\/]?>/gi,"\n").replace(/&nbsp;/g), " ");
    return (editorText !== "") && (editorText === this.options.promptText);
}

I'm using Backbone.js which is where this.$el comes from (it's just the div container of the CKEditor, sort of a last ditch attempt to get the events). setupCKEditorInstance is called in the initialize function (not shown) after the template is rendered.

A3. Chrome (most recent). I open a page where I have a CKEditor instance and the instance immediately gets focus with no prompt text set. Then I click out of the editor. Sometimes this causes the promptText to be set, sometimes it doesn't. When it does, I'll click back in the editor, and sometimes this will cause promptText to go away, sometimes it doesn't. The behavior is super inconsistent.

B1. None of those are really what I'm doing/seeing.

B2. I'll try and come up with something.

[Piotrek Koszuliński]

You should not listen on some elements' focus and blur events. As you found - browsers will not let you easily find out when editor was focused and when blurred.

Listening for editor#focus and #blur should be enough, because there are known only minor issues related to them.

You should also avoid calling this.editor.focusManager.blur(); if you're not really blurring editor, because you'll break its focus/blur state. If you want to blur editor, then you need to move focus somewhere else.

I'm closing this issue now as invalid, but if you'll still have issues after taking into account my tips, then feel free to open next ticket.