Why does the selection disappear when clicking on a div?

Question

I'm using the following code to edit a text in contenteditable div by changing its font. when clicking on a div which is a stylized dropdown menu the selection disappears in chrome. It works fine in firefox, opera and even in IE!

Rangy doesn't find any selected text to deal with. I'm wondering why!

Note: it works fine when using 'mouseover' instead of 'click'

DropDown.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dt.on('click', function(event){
            $(this).toggleClass('active');
            if (savedSel) {
                rangy.removeMarkers(savedSel);
            }
            savedSel = rangy.saveSelection();
            savedSelActiveElement = document.activeElement;
            return false;
        });

    }
}

Answer 1

One workaround is to use the mousedown event rather than the click event and preventing the default behaviour.

obj.dt.mousedown(function(event){
    event.preventDefault();
    $(this).toggleClass('active');
    if (savedSel) {
        rangy.removeMarkers(savedSel);
    }
    savedSel = rangy.saveSelection();
    savedSelActiveElement = document.activeElement;
    return false;
});

Demo: http://jsfiddle.net/NJuMK/1/

Answer 2

You should save the selection data before the click happens. For example, save it on the mouse over, and use it when the user clicks.