toolbar does not disappear

[kel093]

Hello. I am apologise if i duplicate the issue, but i don't found it in list of issue's.
I am using the AlloyEditor and today saw strange behaviour. I selected the text after this the toolbar is appears, then i clicked on the any place on the screen and the toolbar does not disappear.

I investigated how plugin works and understood the problem, the problem is that editor.status == "ready" and listener "contentDom" will not be called. That's means that listeners "mousedown" and "keydown" are not be added to document.

I fixed this problem, please see my changes in function componentDidMount().

        if (editor && editor.status == "ready") {
            document.addEventListener('mousedown', this._mousedownListener);
            document.addEventListener('keydown', this._keyDownListener);
        } else {
            editor.once('contentDom', (function () {
                document.addEventListener('mousedown', this._mousedownListener);
                document.addEventListener('keydown', this._keyDownListener);
            }).bind(this));
        }

[ipeychev]

Hey @kel093,

Interesting issue! How exactly we can reproduce it?
Also, could you see if the following code snippet will fix your issue too:

editor.once('instanceReady', function() {
    document.addEventListener('mousedown', this._mousedownListener);
    document.addEventListener('keydown', this._keyDownListener);
}.bind(this));

Maybe we can just change the event and avoid the other "if".

Thanks,

[kel093]

I tried to change event "contentDom" on "instanceReady", but didn't help.

It's easy to reproduce, just call destroy() then init() on earlier initialized AlloyEditor.

Look like on this code:

var editor2 = AlloyEditor.editable('editable'); //init the AlloyEditor
setTimeout(function(){
    //reinit AlloyEditor
    editor2.destroy();
    editor2.init();
},1000);

[ipeychev]

Ah, I see! This way of reinitializing is unsupported however. The function "init" is not supposed to be called manually.
The recommended way after destroying is to get a new fresh instance of the editor, like this:

var editor2 = AlloyEditor.editable('editable'); //init the AlloyEditor
setTimeout(function(){
    //reinit AlloyEditor
    editor2.destroy();
    editor2 = AlloyEditor.editable('editable');
},1000)

Thanks,

[kel093]

I tried this way, but It didn't help too.

[ipeychev]

Hm. Okay. Chema, would you have 5 mins to check this one? If not, I can try this evening.

@jbalsas

[jbalsas]

Yes, I'll check this one out later today

[jbalsas]

I just checked, and yeah, it does make sense that it would fail. I think the best fix would be to change the event from contentDom to focus. This way, we can even save the event initialization if the editor never gets really used.

I'll put a PR with this in a little while.

@kel093, I tested this and it even fixes the unsupported call to init instead of the static initialization, but could you verify this fixes the issue for you as well?

[kel093]

@jbalsas, I just tested and it looks well for me too.
Thanks for quick fix.

[ipeychev]

Hey @jbalsas,

Changing the event to focus breaks one of the tests on Firefox and all IEs.
After looking also on the comments here, let's try another fix, which will be to not wait for "contentDom or "focus" here.
The change is committed, could you please check if that is OK for everybody?

@kel093

Thanks,