#4441 open bug ()

Opened April 07, 2009 08:26AM UTC

Last modified July 20, 2017 06:29PM UTC

Selectable: Mousedown on scrollbar start selectable

Reported by: Ludovic Owned by:
Priority: minor Milestone: 2.0.0
Component: ui.selectable Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
Description

Under Firefox, when you click on your scrollbar, it starts selection.

The selectable size is scrollWidth and not innerWidth.

It means that if e.layerX > scrollWidth, don't start.

Same for scrollHeight.

Attachments (1)
Change History (10)

Changed May 07, 2009 10:42AM UTC by jzaefferer comment:1

milestone: TBD → 1.7.2

Changed May 07, 2009 01:20PM UTC by jzaefferer comment:2

milestone: 1.7.2 → 1.8

Changed May 21, 2009 02:58PM UTC by tzellman comment:3

I attached a "partial fix" for this ticket. One workaround is to allow the user to "cancel" the start operation by returning false from the triggered "start" method; the ui.selectable code would obviously then need to respect that and return before doing the select operation.

Also, to get around the issue of scrolling I added this check in my "start" method (which could probably be expanded on and added to the _mouseStart method directly).

#!js

    myTable.selectable({filter: 'tr',
        start: function(event, ui) {
            var t = event.target;
            if (event.pageX > t.offsetWidth + t.offsetLeft)
            {
                return false;
            }
        }
    });

Changed December 23, 2009 07:27PM UTC by Sam Hasler comment:4

Doing it on the start event didn't work. This stackoverflow question has the following solution:

$(function() {
    $("#selectable").mousedown(function (evt) {
        evt.stopImmediatePropagation();
        return false;
    });        
    $("#selectable").selectable();
});

Changed December 23, 2009 07:51PM UTC by Sam Hasler comment:5

I spoke too soon, that actually stops the selectables from being selectable.

Changed February 12, 2010 08:56PM UTC by jmrandol comment:6

My issue was with the scrollbar on a tbody and this worked for me at the beginning of ui.mouse _mouseDown:

if (event.pageX > this.element.width())

{

return true;

}

Changed November 08, 2010 09:36PM UTC by parajulik comment:7

One workaround I found (and that could be used to fix this bug) is to wrap the sortable items with two divs. Then, Initialize selectable on the inner div, and set overflow to scroll on the outer div.

This way, your scrollbar lies on the outer div which is not a part of the selectable.

Changed October 11, 2012 02:52PM UTC by scottgonzalez comment:8

milestone: 1.9.0 → 2.0.0

Changed October 28, 2012 01:14AM UTC by tj.vantoll comment:9

status: new → open
summary: Mousedown on scrollbar start selectable → Selectable: Mousedown on scrollbar start selectable

Verified this is still an issue as of 1.9.1 - http://jsfiddle.net/tj_vantoll/4fGTM/.

Changed July 20, 2017 06:07PM UTC by rjollos comment:10

_comment0: I know this issue hasn't been touched in 5 years, but I found a decent solution - \ This solution builds on Sam's original, but allows drag select to work in any blank canvas area that aren't scrollbars. It works by detecting if the point of the click that is beyond the view area. \ \ $("#selectable").mousedown((event : JQueryEventObject) : void => { \ if (event.offsetX >= event.target.clientWidth | | event.offsetY >= event.target.clientHeight) { \ event.stopImmediatePropagation(); \ } \ }); → 1500575359987771

I know this issue hasn't been touched in 5 years, but I found a decent solution -

This solution builds on Sam's original, but allows drag select to work in any blank canvas area that aren't scrollbars. It works by detecting if the point of the click that is beyond the view area. 

        $("#selectable").mousedown((event : JQueryEventObject) : void => {
            if (event.offsetX >= event.target.clientWidth | | event.offsetY >= event.target.clientHeight) {
                event.stopImmediatePropagation();
            }
        });