Chrome Bug Workaround – Text Selection on Dragging in Selectable

I came across an interesting problem the other day. I had a page set up with some jQuery UI selectable elements and when dragging to select multiple elements the cursor changes to the text select cursor and text on the page becomes highlighted. Normally the cursor should stay as the pointer and no text should become highlighted.

I spent a lot of time debugging because the page was based on legacy code written by someone else. I worked out the problem didn’t affect Firefox or IE, only Chrome. After some research I found the following thread in the jQuery forums.

http://forum.jquery.com/topic/chrome-text-select-cursor-on-drag

There’s no universal solution in the thread, but I managed to find enough information to fix my particular problem. I decided to go with the following line of code.

I wouldn’t recommend it for everyone because it effectively turns off text selection for the page in whichever browser the user is using. Since I only needed it on one page and not having text selection on that page would not be a problem, I just went with that.