Why is .disableSelection() deprecated?

Question

.disableSelection in JQueryUI 1.9 is deprecated. The only explanation I can find is, literally, "Disabling text selection is bad. Don't use this." and "We shouldn't allow developers to mess with text selection. This was originally for the interaction plugins, but they're all handling text selection properly on their own at this point."

Since there is no alternative suggested, I assume they mean that it is always bad but I cannot fathom their reasons. A double/triple-click or otherwise meaningless selection of an elaborate-UI application improperly applies the text-highlight effect and (to me) instantly removes the illusion of a robust user experience.

Desktop applications don't suffer from this! Buttons and other controls in a Desktop environment are regions of pixels that look solid and act intuitively no matter what you do to them (or else they're broken). The fact that web applications are composed of complex html boxes, backgrounds, borders, and images (the web-analog of pixels) is no reason to betray the illusion that the screen elements we interact with isn't an atomic, physical object.

In the image below, arguably some of the text should be selectable, such as the paragraphs of text within panels which could be application data. But for some applications it would be a reasonable design choice that other parts, such as the text in buttons, tabs, accordion headers, and text behind modal dialogs would not be selectable. This especially applies to draggable/sortable kinds of behaviors.

1) Am I misinterpreting their decision? Is the recommendation more specific to JQuery than I realize?

2) If it is meant as a general statement that text should always be selectable like this, please provide a fuller explanation of why.

3) If I were going to do it anyway, what is the most performant, complete, respectful, cross-browser, and universally accessible to go about it now that disableSelection is deprecated?

Ponton

I don't agree with the assumption that a double/triple click select is not what users intend. In fact, I almost always select this way! Also, you can prevent users from selecting UI elements that should not be selectable. See the user-select property. – Arkwright

I agree that the it is sometimes the intended action, but as the application designer I feel I should be able to disallow it when I think that text selection is not an important feature and where it might interfere with other higher-priority actions. – Ponton

You should consider leaving that behavior up to the system so that your application performs as expected. That's my reasoning for not messing with stuff like this. I'm sure there are others. – Arkwright

But thanks, I was not aware of user-select - is that an acceptable alternative, according to the philosophy of the jQueryUI team? – Ponton

I have no idea what the jQuery UI team thinks. You should ask them if you are concerned with their opinion. – Arkwright

LOL It actually says on the docs page "Disabling text selection is bad. Don't use this."... how arrogant and unhelpful. Sometimes I think we forget that not every HTML page is a "website" per se, some are meant to be "applications" or "tools" where it makes sense to do things like disable text selection. I would think the jQuery team would be fully aware of this aspect. – Incarnation

There are clearly ways to disable selection with CSS and also clearly sitations where it is necessary. The real question I was hoping this question/answer would solve is whether or not it is worth our collective time to be doing something like calling disableSelection() as a quick-and-dirty measure. – Flagstone

I'm also wondering: Why call this function deprecated and then keep it listed in some of the official jQuery UI examples? (Example: jqueryui.com/draggable/#sortable ). Personally, I think this should be left up to the user, not the jQuery UI team. That's like saying a knife can be used inappropriately, so we'll stop production of it. I could have really used this function in one of my applications instead of messing with tons of CSS code and experimenting in how to implement it into my complicated scripts, but I didn't know it existed until I found it in draggable. – Alfonzoalford

To slap a little irony over this in 2020, the jQuery UI demo page still uses this function. – Ebba

Answer 1

You can use CSS to accomplish this in most browsers: http://jsfiddle.net/fQthQ/

* {
   -ms-user-select: none; /* IE 10+ */
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

.selectable {
   -ms-user-select: auto;
   -moz-user-select: auto;
   -khtml-user-select: auto;
   -webkit-user-select: auto;
   user-select: auto;
}

Opera does not currently support this feature.

See the MDN page for more info: https://developer.mozilla.org/en-US/docs/CSS/user-select

Fewer

This is definitely helpful. I wish that the jQuery UI page for .disableSelection() mentioned this as an alternative (or elaborated on why they don't support user-select either). – Ponton

to make selectable again in firefox you have to set -moz-user-select: text – Hargis

Answer 2

A real-world case in which disabling text selection is useful is a <ul> element whose <li> have been programmed to be draggable (for sorting). The dragging works correctly except that text is getting selected while the user is dragging. Surely this is a legitimate use for disableSelection().

I know that it can be done without this method (otherwise it'd be impossible for the method to do it in the first place); but the reason I wanted to use disableSelection() is to concisely express my desire in a single place and have jQuery-UI handle my cross-browser compatibility issues rather than having to use a combination of several CSS rules and some JS (for IE7).

I believe this feature is deprecated because someone was annoyed at web sites that disable selection, and decided that this is not a practice they should encourage. It's analogous to a web programmer refusing to support popular legacy browsers because they don't want to encourage their use. Such a programmer would be fired, but you can get away with imposing your philosophy on others when you have power over a popular library. Deprecating this feature has the effect of making programmers who want to disable selection waste their time looking for an alternative method. By punishing evildoers, jQuery-UI will presumably make them change their ways, and our society will not be inundated with web sites that disable selection. So you see, there is a perfectly good rationalization, and whoever wrote "Disabling text selection is bad. Don't use this." in the official documentation can regard themselves as heroic. We're the bad guys here.

Higdon

Agreed, but this is less of an answer and more of a comment. Welcome to StackOverflow! – Ponton

What makes it even more laughable is that most of the JQueryUI examples use it! If you happen to run into this problem while using JQueryUI then you can use the 'containment' option when defining the (eg) sortable item. $( '#sortable1' ).sortable({ items: 'li:not(.ui-state-disabled)', containment: 'parent' }); – Tetrastich

Answer 3

As an alternative to the CSS user-select: none; technique, I think simply preventing default behavior on double-click and mousedown via $(document).on('dblclick mousedown', '.prevent-select', false); has some advantages:

1. Still allows text selection, should the user want to drag the cursor around the elements. Just prevents annoying text selection when the user is rapidly clicking.
2. Better browser support.
3. Not deprecated by jQuery team (no evil glares in code review.)

Innervate

Answer 4

I could not agree more with @WesleyMurch, wish I could give you more +1s :) I also feel that, JS should not be the way forward, css may be better for this...,

If you need the selection to toggle (in some cases if dynamic) you can use jquery to toggle between classes, (old IE browsers) you may ask???

Well it's a good way (subtle tool) to discourage people to keep using OLD I.E. because of the things they are missing out.

http://caniuse.com/#search=user-select

(Although IE 8/9 [from number of users in % perspective] is a big number but it depends how much you really care)

I would use the CSS option as @Shmiddty explains but maybe, enabled to start with and disable as you go along, but that's just my opinion :)

Ibarra