Question

Even though the “unselectable” method is supposed to disable text selection, it does not function properly in IE, at least IE8. The text cursor is still present, and allows for input.

I should assume that it also does not work in IE9, as the Microsoft equivalent CSS attribute “-ms-user-select” has only recently been introduced in IE10, which has not been “officially” released, and is also not currently supported by Windows 7.

I should also question why the webkit version (“-webkit-user-select”) is not included, either. I understand that webkit is a fork of khtml, and it seems to work as intended in Chrome, but I still question the omission.

/**
* Disables text selection for this element (normalized across browsers)
* @return {Ext.Element} this
*/
unselectable : function(){
    var me = this;
    me.dom.unselectable = "on";

    me.swallowEvent("selectstart", true);
    me.applyStyles("-moz-user-select:-moz-none;-khtml-user-select:none;");
    me.addCls(Ext.baseCSSPrefix + 'unselectable');

    return me;
}

Is there a simple way to modify this code in order to provide proper functionality in versions of IE older than IE10?

EDIT: I am having a bit of trouble getting this to work. I have inserted the following in the onReady call, but before the app.

(function() {
    var Ext = window.Ext4 || window.Ext;

    Ext.override(Ext.dom.Element, {
        unselectable: function() {
            var me = this;
            me.dom.unselectable = "on";

            me.swallowEvent("selectstart", true);

            me.applyStyles([
                '-moz-user-select: none;', 
                '-khtml-user-select: none;', 
                '-webkit-touch-callout: none;', 
                '-webkit-user-select: none;', 
                '-ms-user-select: none;', 
                'user-select: none'
            ].join());

            me.addCls(Ext.baseCSSPrefix + 'unselectable');

            return me;
        },

        selectable: function() {
            var me = this;
            me.dom.unselectable = "off";
            // Prevent it from bubles up and enables it to be selectable
            me.on('selectstart', function(e) {
                e.stopPropagation();
                return true;
            });

            me.applyStyles([
                '-moz-user-select: text;', 
                '-khtml-user-select: text;', 
                '-webkit-touch-callout: text;', 
                '-webkit-user-select: text;', 
                '-ms-user-select: text;', 
                'user-select: text'
            ].join());

            me.removeCls(Ext.baseCSSPrefix + 'unselectable');
            return me;
        },
    });
})();

However, I am getting this error:

Uncaught TypeError: Cannot read property ‘Element’ of undefined

Answer 1

The line me.dom.unselectable = "on"; is there to handle unselectable for IE9 and lower. This will add an attribute to the element like <div unselectable="on">blah</div>, and that should cause the div’s text to no longer be editable. Is that not working for you?

Unfortunately Ext’s unselectable and selectable appear to not quite handle webkit, you can fix that by overriding the methods. How to override the method depends on which version of the SDK you are using.

For App SDK 2.0p and 2.0p2

These versions of the SDK are built against ExtJS 4.0.7. In Ext 4.0, you can’t use Ext.override to patch up Ext.Element. So you need to be a bit more manual and alter the prototype:

Ext.core.Element.prototype.unselectable = function() {
   var me = this;
   me.dom.unselectable = "on";

   me.swallowEvent("selectstart", true);

   me.applyStyles([
    '-moz-user-select: none;', 
    '-khtml-user-select: none;', 
    '-webkit-touch-callout: none;', 
    '-webkit-user-select: none;', 
    '-ms-user-select: none;', 
    'user-select: none'
    ].join());

   me.addCls(Ext.baseCSSPrefix + 'unselectable');

   return me;
};

Ext.core.Element.prototype.selectable = function() {
   var me = this;
   me.dom.unselectable = "off";
   // Prevent it from bubles up and enables it to be selectable
   me.on('selectstart', function(e) {
       e.stopPropagation();
       return true;
   });

   me.applyStyles([
    '-moz-user-select: text;', 
    '-khtml-user-select: text;', 
    '-webkit-touch-callout: text;', 
    '-webkit-user-select: text;', 
    '-ms-user-select: text;', 
    'user-select: text'
    ].join());

   me.removeCls(Ext.baseCSSPrefix + 'unselectable');
   return me;
};

You should do this as the very first thing inside Rally.onReady()

For App SDK 2.0p3 and on

The App SDK for 2.0p3 and forward is built against ExtJS 4.1. They changed Ext.Element to support Ext.override, so here we can do a slightly cleaner solution (this is basically what I originally posted):

Ext.override(Ext.dom.Element, {
    unselectable: function() {
        var me = this;
        me.dom.unselectable = "on";

        me.swallowEvent("selectstart", true);

        me.applyStyles([
            '-moz-user-select: none;', 
            '-khtml-user-select: none;', 
            '-webkit-touch-callout: none;', 
            '-webkit-user-select: none;', 
            '-ms-user-select: none;', 
            'user-select: none'
        ].join());

        me.addCls(Ext.baseCSSPrefix + 'unselectable');

        return me;
    },

    selectable: function() {
        var me = this;
        me.dom.unselectable = "off";
        // Prevent it from bubles up and enables it to be selectable
        me.on('selectstart', function(e) {
            e.stopPropagation();
            return true;
        });

        me.applyStyles([
            '-moz-user-select: text;', 
            '-khtml-user-select: text;', 
            '-webkit-touch-callout: text;', 
            '-webkit-user-select: text;', 
            '-ms-user-select: text;', 
            'user-select: text'
        ].join());

        me.removeCls(Ext.baseCSSPrefix + 'unselectable');
        return me;
    }
 });

In both cases, just slightly tweaking the function to also add styles for webkit, IE, etc.