[UNKNOWN][3.0.3] Unselectable text is sometimes selectable

[Tom23]

Ext version tested:



Ext 3.0.3



Adapter used:


ext



css used:


only default ext-all.css




Browser versions tested against:


FF3.5.5



Operating System:


WinXP Pro



Description:
IE has an HTML attribute "unselectable", whereas other browsers have special CSS attributes:

/* from ext-all.css */
.x-unselectable, .x-unselectable * {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select:ignore;
}
Thus, to make an element unselectable, it must take the following form:

<div unselectable="on" class="x-unselectable">Ext.Element does provide an unselectable() method that takes care of this. However, this method is not consequently used. For example:


Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){

/** @private */
this.el = Ext.get(dragElement, true);
this.el.dom.unselectable = "on"; // should be this.el.unselectable();
Also, several templates use only one of unselectable="on" / class="x-unselectable", where both should be used
(for example, Ext.ListView.initComponent)

Possible fix:

Always use

<tagname unselectable="on" class="x-unselectable">in templates.

Do not use el.dom.unselectable = "on" on Elements. Use el.unselectable() instead.

Add "-webkit-user-select: ignore" to Element.unselectable method's implementation.

(To make it really bullet-proof, one could add


*[unselectable="on"], *[unselectable="on"] * {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select:ignore;
}to ext-all.css)