[chrome] Tab based navigation - No caret / focus in element?

[abayob]

Heya,

I am using the new CKEditor version because of the lovely moono-lisa skin. I came from using an older version: 4.5.7.

I am using a few plugins to create an inline + shared editor. The build files of each are included in this post.

The code to initialize a single editor field is:

var editor = CKEDITOR.inline(
       uniqueNumber, 
       {
          customConfig: '/dist/ckeditor/builder-config.js?v2',
                    
          sharedSpaces: {
             top: top_id,
             bottom: bottom_id
        },
           colorButton_colors: #fff, #000, etc...
   })

Steps to reproduce

1. First let ckeditor initialize the inline shared editor
2. Then start tabbing from one text element (contenteditable) to another
3. The next text field will have no caret visible and apparently no focus.
4. When trying to tab to the next, an error is thrown:

Expected result

When you tab from one to the next, a caret should appear in the start of the text area

Actual result

Nothing visible (focus line does appear) and typing does nothing. Also when tabbing to a next text area, an error is thrown

Other details (browser, OS, CKEditor version, installed plugins)

Version 4.5.7 does not have this issue? Tabbing in all browsers works fine in this release!

[abayob]

builder-config.js version 4.5.7

[abayob]

builder-config version 4.6.2

[abayob]

build file 4.5.7

[abayob]

build file 4.6.2

[abayob]

Forgot to include the error message:

Uncaught TypeError: Cannot read property 'contains' of null                ckeditor.js at 842
    at f.getContext (ckeditor.js?v4.6:842)
    at f.<anonymous> (ckeditor.js?v4.6:852)
    at a.p (ckeditor.js?v4.6:10)
    at a.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js?v4.6:12)
    at a.CKEDITOR.editor.CKEDITOR.editor.fire (ckeditor.js?v4.6:13)
    at CKEDITOR.keystrokeHandler.d (ckeditor.js?v4.6:241)
    at f.p (ckeditor.js?v4.6:10)
    at f.CKEDITOR.event.CKEDITOR.event.fire (ckeditor.js?v4.6:12)
    at HTMLDivElement.<anonymous> (ckeditor.js?v4.6:62)

[abayob]

I have found a workaround for now:

var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome) {
    $(window).keyup(function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        var selected = $('.some-selector:focus');
        if (code == 9 && selected.length) {
            if(!document.getSelection().anchorNode) setSelectionRange(selected[0], 0, 0);
        }
    });
}

The setSelectionRange functions looks as following:

/**
* Sets the selection in an element to a given position,
* If start and end are the same, the caret position is set.
* @param {object} el    JavaScript node object where the selection is set in
* @param {integer} start Starting position
* @param {integer} end   Ending position
*/
setSelectionRange: function (el, start, end) {
if (document.createRange && window.getSelection) {
    var range = document.createRange();
    range.selectNodeContents(el);
    var textNodes = Abayo.ckeditor.getTextNodesIn(el);
    var foundStart = false;
    var charCount = 0, endCharCount;

    for (var i = 0, textNode; textNode = textNodes[i++]; ) {
        endCharCount = charCount + textNode.length;
        if (!foundStart && start >= charCount
                && (start < endCharCount ||
                (start == endCharCount && i <= textNodes.length))) {
            range.setStart(textNode, start - charCount);
            foundStart = true;
        }
        if (foundStart && end <= endCharCount) {
            range.setEnd(textNode, end - charCount);
            break;
        }
        charCount = endCharCount;
    }

    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
} else if (document.selection && document.body.createTextRange) {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(true);
    textRange.moveEnd("character", end);
    textRange.moveStart("character", start);
    textRange.select();
}
}, 

/**
* Function to return only the text nodes that are nested into the given node
* @param  {object} node JavaScript node object
* @return {array}      Array of text node objects
*/
getTextNodesIn: function(node) {
var textNodes = [];
if (node.nodeType == 3) {
    textNodes.push(node);
} else {
    var children = node.childNodes;
    for (var i = 0, len = children.length; i < len; ++i) {
        textNodes.push.apply(textNodes, Abayo.ckeditor.getTextNodesIn(children[i]));
    }
}
return textNodes;
}

[Jakub Ś]

This is most likely a duplicate of #16809.

@abayob please provide reduced HTML page you use so that I could try reproducing this issue with default CKEditor. Maybe your scenario has something special which was missed in #16809.