thibaultjanbeyer / dragselect Goto Github PK

First things first: Thanks for this sweet plugin!

Describe the bug
I'm working on an application, where I've implemented DragSelect using draggability: false. Since I now want to use the arrow keys for other events, I noticed that the arrow keys still move the elements around and I need to additionally set dragKeys: { up: [], down: [], left: [], right: [] } to prevent this. Since I think most use-cases where draggability is set to false don't want their elements to move at all, I would consider this unexpected behaviour.

To Reproduce
Steps to reproduce the behavior:

1. Set draggability: false when initializing DragSelect
2. Press the arrow buttons
3. See the elements move around

Expected behavior
I would expect dragKeys to either default to { up: [], down: [], left: [], right: [] } or be disabled entirely when draggabilty is set to false.

Desktop

• OS: Manjaro Linux
• Browser: Chrome, Firefox, probably all

When using the area attribute and you scroll the document, the selection box gets misaligned.

Codepen demonstrating the problem.

GitHub limit the width of page contents to 1280px and then the width of main content to 936px, Which make the comments of example code hard to read by the Horizontal scrolling. Cap the line length to about 100 will stop the scrolling for Consolas:

var ds = new DragSelect({

  // node/nodes that can be selected.
  // This is also optional, you could just add them later with .addSelectables().
  selectables: document.getElementsByClassName('selectable-nodes'),
  // draggable element. By default one will be created.
  selector: document.getElementById('rectangle'),
  // area in which you can drag. If not provided it will be the whole document.
  area: document.getElementById('area'), 
  // If set to true, no styles (except for position absolute) will be applied by default.
  customStyles: false,
  // special keys that allow multiselection. Default value below.
  multiSelectKeys: ['ctrlKey', 'shiftKey', 'metaKey'],
  // If set to true, the multiselection behavior will be turned on by default without pressing
  // modifier keys. Default: false
  multiSelectMode: false,
  // Speed in which the area scrolls while selecting (if available).
  // Unit is pixel per movement. Set to 0 to disable autoscrolling. Default = 1
  autoScrollSpeed: 3,

  // fired when the user clicks in the area. This callback gets the event object.
  // Executed after DragSelect function code ran, before the setup of event listeners.
  onDragStart: function(element) {},
  // fired when the user drags. This callback gets the event object.
  // Executed before DragSelect function code ran, after getting the current mouse position.
  onDragMove: function(element) {},
  // fired every time an element is selected. (element) = just selected node
  onElementSelect: function(element) {},
  // fired every time an element is de-selected. (element) = just de-selected node.
  onElementUnselect: function(element) {},
  // fired once the user releases the mouse. (elements) = selected nodes.
  callback: function(elements) {}

});

// if you add the function to a variable like we did, you have access to all its functions
// and can now use start() and stop() like so:
ds.getSelection(); // returns all currently selected nodes

// adds elements that can be selected. Intelligent algorithm never adds elements twice.
ds.addSelectables(document.getElementsByClassName('selectable-node'));

// used in callbacks to disable the execution of the upcoming code.
// It will not teardown the functionality.
ds.break(); 

ds.stop();  // will teardown/stop the whole functionality
ds.start(); // reset the functionality after a teardown

// and many more, see "methods" section in documentation

Feel free to ask for a PR instead, or reject.

Thank you for the wonderful library!

Can you please provide me direction with how to tackle my problem.

I need to be able to select all items between two of them - first one and last.
Scenario: user shift-clicks on first item, then shift-clicks on last and all items in between become selected.

Maybe this is already implemented and I'm missing something.

If i use "getCursorPositionDifference" in the function "onElementSelect", it throws an error if i just click the element, without using the mouse. I think it does not have a current position, because i didn't move the mouse?

On of the objects is undefined, which is checked against:

DragSelect.prototype.getCursorPositionDifference = function() {
  var initialPos = this.getInitialCursorPosition();
  var pos = this.getCurrentCursorPosition();

  var difference = {
    x: initialPos.x - pos.x,
    y: initialPos.y - pos.y
  };

  return difference;
};

You can replicate the issue here: https://codepen.io/T-J/pen/goQoaZ

Hey there,

I've just started using your library and it is awesome. Thank you for creating it.

Can you add **resetSelectables() ** method to the list ?

So instead of the codes below :

                axios(url).then(response => {
                    let removeList = document.querySelectorAll('[data-selectable]');
                    this.selectable.removeSelectables (removeList);

                    this.$nextTick().then(() => {
                        this.selectable.addSelectables(this.getElements()); 
                    });
                });

I would like to use it like this :

                axios(url).then(response => {
                    this.$nextTick().then(() => {
                        this.selectable.resetSelectables(this.getElements()); 
                    });
                });

      this.selectable.resetSelectables();   // when no args, wipe all selectable elements.

Describe the bug
Hi. thanks for the great lib!
In mobile view, selection and dragging is not working correctly. (a few times, it seems working). Please look at this video.
Also, when drag items, selection event is also triggered (only mobile view).
https://ttprivatenew.s3.amazonaws.com/pulse/mochuan-video/attachments/15715842/TinyTake11-01-2021-02-31-53.mp4

Looking forward to hearing from you.

Thanks

To Reproduce
Steps to reproduce the behavior:

1. Mobile view
2. Selection and dragging repeatly

Screenshots

I need to insert right before an element in selected.

When I click on a selected element I need to avoid to "deselect" it under some circumstances.
How can I achieve this?

Describe the bug
Won't drag if element is not immediate mouse target

To Reproduce
Steps to reproduce the behavior:

1. Click on an element that is not immediate click target
   => Element can't be dragged

Expected behavior
Element should be draggable

Additional context

• Tested in react start app when adding the img as draggable
• This is due to the check: !_this.DS.SelectableSet.has(event.target) in isDragEvent

Great library and thank you for building it!

I'm having an issue with drag selecting within a scrollable div. Safari 11 will scroll the div when you get to the edge, but the selected divs that get scrolled out of the parents viewport become unselected.

Chrome 65 doesn't scroll when I reach the edge of the parent div and neither does Firefox 57 so I can't test them.

Any ideas?

First, thanks for doing DragSelect, it's a great library!

Just a note and for lack of a better place filing an issue here:

I just noticed by coincidence by looking at the code on master there is a setSelectables method in version 1.8.1 but couldn't find the version when I looked at https://github.com/ThibaultJanBeyer/DragSelect/releases — so I thought it wasn't released yet and in the works. But then I saw it's already released on npm, so it's there and I was able to upgrade via package.json. Might be worth adding it to the github release page so others don't miss it :).

Describe the bug
Scrolling by clicking and dragging does not work in Chrome and Firefox - or rarely works, one time I got it to scroll in Firefox. Works fine in Safari though. I tried a couple values in autoScrollSpeed (1, 3, 100) but it didn't make any difference.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codepen.io/anon/pen/qJdgNg
2. Click and drag outside or til the edge of the window vertically

Expected behavior
The window should scroll.

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome and Firefox
• Version Firefox 62.0.2 and Chrome 69.0.3497.100

Im using npm module dragselect 1.11.3

When .stop() ing the dragselect in the callback js dies in an endless loop:
https://codepen.io/Exxenmann/pen/eoJPNZ

Im trying for example to end "selection mode" (.stop() ing it) after the selection is complete.

Ill try to solve it starting in about six hours (after work) and file a pull request if I can.

Am I just stupid / trying something oviously wrong or is this really a bug?

I've found a dirty workaround

        DragSelect.prototype.isMultiSelectKeyPressed = function( event ) {
          this.multiSelectKeyPressed = true;
          return this.multiSelectKeyPressed;
        };

        new DragSelect({
          selectables: document.querySelectorAll('.item'),
          callback: function(e){
              console.log(e);
          },
        });

There is no Types information available for the newest version of your library. When npm installing '@types/dragselect', I get types of version 1.13.1, while the library is already at 2.0.2.

The types definitions (of 1.13.1) are located here: https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/dragselect

I'm not sure if you are maintaining this, or if someone else is, but I wanted to post this feedback.

Is it possible to change the color of drag selection from blue to red?
Thanks

Sean

I can not bind the click event on the items (selectable items) in "area" element. I think the code will be stopped immediately, so it can not fire the event.

When drag select detects that it has run against the edge of the area in which it can operate it stops the selection of items. It would be nice that it would only limit the selection in the direction that is limited. For example when I drag up and it reaches the top area border I can't drag sideways anymore.

Describe the bug
the document

getSelection() → {Array.<(HTMLElement|SVGElement)>}
Returns the current selected nodes
Source:
DragSelect.js, line 825
Returns:
Type:  Array.<(HTMLElement|SVGElement)>

my result:

this.selection.getSelection() (3) [span.item.ds-selectable.ds-selected.ds-hover, span.item.ds-selectable.ds-selected.ds-hover, span.item.ds-selectable.ds-selected.ds-hover]

To Reproduce

import React, { Component } from 'react';
import DragSelect from 'dragselect'

class App extends Component {

  componentDidMount() {
    this.selection = new DragSelect({
      selectables: document.querySelectorAll('.item'),
      callback: e => console.log(e),
      area: document.getElementById('selection')
    });
  }

  showSelection = () => {
    console.log('this.selection.getSelection()', this.selection.getSelection());
  }

  render() {
    return (
      <div className="App" style={{margin: '100px'}}>
        <button onClick={this.showSelection}>button</button>
        <div id='selection'>
          <div className="test">
            <span className="item">999999</span>
            <span className="item">lorem100</span>
            <span className="item">lorem100</span>
            <span className="item">lorem100</span>
            <span className="item">lorem100</span>
            <span className="item">3333</span>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Expected behavior
Expect method getSelection return DOM Array

Screenshots

Describe the bug
Thanks for your great lib.
I updated package to v2.0.0 today, and run npm start.
I got this issue.

Hope your kind contact
Thanks

Screenshots

Env

• Angular v11
• Node 14.15.4

Is your feature request related to a problem? Please describe.
If you have already items selected and you press Shift key to enter multiSelect mode, I want to add new selected elements without deselecting the ones that are already selected.
Currently programmed behavior in the library will deselect items if in multiSelect mode if they are selected. This behavior is the same that happens when you are with a Mac OS in the desktop and selecting the icons in the desktop.
Unlike Windows, which does the opposite.

Describe the solution you'd like
It would be great to have a flag/option to control the behavior of whether you want to deselect or still have them selected if the selection rectangle of the library hovers over an already selected item in multiSelect mode.
Or have a callback function that allows you to control this behavior in real time.
I am open to suggestions in the way this can be implemented.

Describe alternatives you've considered
I have yet to explore a way to implement this behavior already with the provided public API of the library but it is likely that the end implementation will be somewhat dirty or confusing to achieve it.

Is your feature request related to a problem? Please describe.
Touch functionality is non-existent

Describe the solution you'd like
Tap and drag would work exactly like click-drag

Is your feature request related to a problem?
When drag selecting multiple elements in a form builder, I would then like to be able to drag them as a group
Describe the solution you'd like
I would like a callback for holding a continuous click on an individual element which is selected alongside numerous others

If I call .stop() all functionality is gone as it should be.
But if I afterwards click a selectable element all functionality is "restored".

https://codepen.io/Exxenmann/pen/gyPVaW

Will file a pull request if/when I solve it.

Describe the bug
After installing and emulating the https://codepen.io/ThibaultJanBeyer/pen/Nvobgq/ codepen, I get a region with all items stacked on top of each other on the top left of the region. The items are not selectable. (Ps: In my other issue, at least the top item was selectable. See other issue I opened today #51).

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/bxchang04/dragSelectTest
2. Download repo, install DS using npm, then open test2.html
3. See error

Expected behavior
Should emulate codepen example with region: https://codepen.io/ThibaultJanBeyer/pen/Nvobgq/ codepen

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 80.0.3987.163 (Official Build) (64-bit)

Additional context
Very similar to my other issue, #51. But at least that project allowed me to select one of the 6 overlapped items (or it may be selecting all 6, but since they are overlapped, I have no way of testing this).

When i select different Elements, one after another, getCursorPositionDifference does not report a Difference {x:0, y:0}, instead it reports an arbitrary amount.
You can reproduce the issue locally:

1. Add onSelectElement listener and console.log it's result.
2. Click on Element 1, expected {x:0, y:0} instead got {x: 28.25, y: 35.75}
3. Click on Element 2, expected {x:0, y:0} instead got {x: 91.25, y: 31.75}

Kinda working on it right now, what i thought of is to update newCursorPos, everytime an Element is selected. I will make the pull request later.

Describe the bug
As discussed in #59 (comment) .. Drag select autoscroll keeps scrolling past the maximum area height. You can see this clearly below:

Screenshots

To Reproduce
Create a scrollable div as a selectable area, and include multiple selectables so that a drag select triggers an autoscroll event (make area scrollable). When the cursor is close/near to the edge of the area, the scroll goes past the scrollable height indefinitely.

Expected behavior
Once the scroll reaches the bottom (end of scrollable height), the autoscroll event should stop.

Desktop (please complete the following information):

• OS: latest macOS
• Browser: Chrome
• Version: latest version

Additional context
If anyone knows where this can be fixed or point me to the right part in code, I can try to find a fix myself & create a PR.

Thank you

Is your feature request related to a problem? Please describe.
I'm having app which adds new elements on selectable area. To not-reinitialize selection every time it would be nice to pass to DragSelect just selectors I want to be selected

Describe the solution you'd like
selectables: ['.items']

This plugin looks really good first of all!

But when I am using it, I keeps getting the error:
TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

//=============
I apologies, that was my mistake

It'd be helpful if you could provide a key code that can be held to allow adding more items to the current selection similar to how jQuery selectable works.

Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.

Hi,

first and foremost, thank you for this awesome library!

I've just noticed a weird behaviour:
when the selectable items are disabled sometimes there are lags when selecting them.

Browser: Google Chrome Version 63.0.3239.108 (Official Build) (64-bit)
Here the codepen.

Describe the bug
Just first wanted to say that I have made a hack to circumvent this bug for me, so I'm fine. I just wanted to report this, so you know of it. Close it if you don't want to fix it.

But clicking the scrollbar when you have a selection removes the selection.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codepen.io/anon/pen/qJdgNg
2. Make a selection
3. Click and drag the scrollbar
4. The selection is gone

Expected behavior
Items should still be selected.

Desktop (please complete the following information):

• macOS
• Chrome, Safari and Firefox

Thank you for the wonderful project.
Is it possible to maintain the aspect ratio by grouping?

Specifically, when the edge is crossed, all items in the group will have a distance of 0 from the edge.

→
current

It is my ideal to be kept like this.

I would appreciate it if you could consider it.

As my title, please demo with item that has contenteditable=true, that allow user edit item (prevent drag select when item has contenteditable=true). thanks

Hey i thought about adding Unit Test before trying to debug more issues or bringing the Software forward.
I think it would help out to describe the intended behavior, of new functionality. That in turn makes it easier to communicate, what we wish to do (e.g. you could write a unit test that i could fulfill, or i could write a unit test which describes a bug etc.).

I researched a little bit and stumbled on this link: Overview of Javascript testing in 2018

I have some experince in Jest and also tried puppeteer for a while. I would like to implement a solution with that, but i want to know if you have any favorites or plans for Unit testing?

Describe the bug
When I set the area parameter with a SVG node, the selection doesn't work anymore

To Reproduce
Have such a tree

<svg id="root">
    <rect class="selectable">
    <rect class="selectable">
</svg>

new DragSelect({
    selectables: document.getElementsByClass("selectable"),
    area: document.getElementById("root")
})

Expected behavior
To be able to select node restricted to the #root element

Desktop (please complete the following information):

• OS: MacOS
• Browser FF nightly
• Version 63.0a1 (2018-06-27) (64-bit)

.break() was removed in v2. It used to disable the execution of the upcoming code without tearing down the functionality.

This was a very important method when you want to disable the dragselect functionality temporarily, what is the equivalent method in v2 to achieve the same thing?

Thank you!

Is your feature request related to a problem? Please describe.
I've recently had a use-case where I only wanted to select the most significant element covered by the select marquee - while selecting it was likely the other 'neighbour' elements might catch and edge or a corner, but I wanted to find the element that was the 'focus' of the select attempt. The most logical solution I could come up with was to calculate the percentage of each area selected, then thus work out the one that was most covered.

Describe the solution you'd like
The ideal solution would be to include in the returned value of the getSelection() call, an additional property that represents the percentage coverage - this would mean it's useful not only in my use case (finding the most selected element), but also related use-cases where you might want to select multiple elements, but rule out anything less than 10% selected for example. Because the API states that an array of DOM elements is returned this might not be possible, so an alternative might be to set it as a data-attribute (which is what I did)

Describe alternatives you've considered
For my use, I built a rough-and-ready function that I attached to the onDragMove event, but I'm not a JS developer (seriously, I'm banned from writing JS at work!), so it could probably be done in a cleaner, more robust way. I've included my hacky function below to illustrate what I mean

The solution I cobbled together is a function that I've attached to the onDragMove event - it probably would have performance issues on large selectable areas with lots of elements as it iterates on each fire of the onDragMove, but in my use case the select area is fairly small with no more than 10-12 elements, so it's good enough (tm) for my use case.

    var getIntersects = function(ds) {
        var cursorPoints = {
            't' : ds.getInitialCursorPosition().y,
            'b' : ds.getCurrentCursorPosition().y,
            'l' : ds.getInitialCursorPosition().x,
            'r' : ds.getCurrentCursorPosition().x
        }


        if (cursorPoints.t > cursorPoints.b) {
            var tmp = cursorPoints.t;
            cursorPoints.t = cursorPoints.b;
            cursorPoints.b = tmp;
        }

        if (cursorPoints.l > cursorPoints.r) {
            var tmp = cursorPoints.l;
            cursorPoints.l = cursorPoints.r;
            cursorPoints.r = tmp;
        }

        var elements = ds.getSelection();

        for (var i=0; i<elements.length;i++) {
            var element = elements[i];
            var elementPoints = {
                't': element.offsetTop,
                'b': element.offsetTop + element.offsetHeight,
                'l': element.offsetLeft,
                'r': element.offsetLeft + element.offsetWidth
            }


            var coveredRect = {
                't': Math.max(cursorPoints.t, elementPoints.t),
                'b': Math.min(cursorPoints.b, elementPoints.b),
                'l': Math.max(cursorPoints.l, elementPoints.l),
                'r': Math.min(cursorPoints.r, elementPoints.r)
            }

            var elementArea = element.offsetWidth * element.offsetHeight;
            var coveredArea = (coveredRect.b - coveredRect.t) * (coveredRect.r - coveredRect.l);

            var percentage = coveredArea / elementArea;

            element.dataset.covered = percentage;

        }

    }

I then attached another smaller function to the callback event to reduce the selection to the single, most-selected element:

callback : function() {
        	var max = 0;
        	var selected;
        	
        	var elements = ds.getSelection();
        	for(var i=0; i<elements.length; i++) {
        		var element = elements[i];
        		if (parseFloat(element.dataset.covered) > max) {
        			max = parseFloat(element.dataset.covered);
        			selected = element;
        		}
        	}
		ds.setSelection(selected, false, false);
        }

Is your feature request related to a problem? Please describe.
I have a set of buttons arranged in rows, and intended to be traversed just like reading text: That is, first row, left to right, second row, left to right, etc. The selection should include all the buttons between those two, but they won't be covered by a rectangle.

Describe the solution you'd like
When clicking on the first button, it selects it and when dragging around, instead of a rectangle, I'd like to highlight all of the buttons consecutively to the end.

Describe alternatives you've considered
I thought I could just keep track of it myself, but I don't think I know where the cursor currently is. I'm looking at onElementSelect, but that isn't necessarily it.

Additional context
First, I really love this library! It works well, and easily and it looks good out of the box! I wish that I were selecting an area instead of text-like data.

So, imagine that you are selecting part of a paragraph of text. That's what I'd like to do.

I'm looking at the Codepen examples because I'm interested but I'm confused on what is the expected behaviour of the selected elements when you try to drag them.

Is it intentional that they are not moving when I try to drag them? Do I have to implement the re-positioning of the selected elements on drag or does the library does this by default?

I use vue2.0 in the project. When I init a DragSelect instance, the code is

initDragselect () {
    if (!this._dragselect) {
      this._dragselect = new Dragselect({
        selectables: document.querySelectorAll('.piecefile_list'),
        area: document.querySelector('#piecefile_list_flex'),
        callback: e => {
          console.log('--->Dragselect FileList', e)
          if (e && e.length) {
            let selectkey = Array.prototype.map.call(e, (item) => {
              return Number(item.getAttribute('data-key'))
            })
            this.selectBgList = selectkey
          }
        }
      })
    }
  }

And I put this in a FileList components (mx-filelist). When I link to a page includes the mx-filelist, the console show

After that, I link to another page which does not includes mx-filelist. The console show

I want to destroy it in vue destroy method, but it does not work.

  destroyed () {
    if (this._dragselect) {
      this._dragselect = null
    }
  }

How to solve this problem? Should I init a global DragSelect in the index.vue(main)?

Hello,
This probably is a novice question or I must have messed something up myself, but nevertheless here's my issue:

When selecting an area by dragging over the target divs inside the designated area, everything works out fine, but if, after finishing this selection, I do the same, the area will get buggy and keep following my cursor until I click somewhere on the screen again.

Any ideas how I can fix this?

PS: Is there a way to style the selection area?

Is your feature request related to a problem? Please describe.
When an area containg selectables exceeds the viewport, no method for scrolling the view without selecting exists on touch devices. Using one finger to scroll the view results in elements being selected.

Describe the solution you'd like
Google Maps embeds have solved this by having a two finger drag for scrolling the map area. In their case the default one finger scroll would render a page unscrollable, if a map view filled the screen. Since two fingers already scroll (on iOS atleast) similarly to one finger, an option to 'ignore two finger drags' would simply let the browser handle them as usual.

Describe alternatives you've considered
I've dabbled with recognizing two finger events, but it requires a bif of effort, since even the slightest time delay between finger 1 and 2 triggers both events. I can go around this by adding an 'activate selection mode' item for touch screen users (as a button, or a thing you hold down temporarily with another finger to toggle behaviour).

I am using the jQuery.contextmenu library and am running into issues when ctrl+clicking (Mac). DragSelect seems to not respect the ctrl+click as a right click and is behaving as if I just left clicked the element, and clears my entire selection except for the clicked element. I have removed all multiSelect modifier keys from the init and the issue persists.

Any suggestions?

Sam

Hey,

If i use DragSelect to select some div elements links inside this div doesn't work anymore.
Maybe there should be a drag threshold?

Describe the bug
Working with SVGs of musical score, generated by Verovio:
When clicking-and-dragging to select notes (i.e., "note"-class elements in the SVG), the browser correctly draws a matching selection rectangle; but the actual selection rectangle invisibly extends to the top-left corner of the screen. This means additional, non-intended elements are added into the selection. This problem only occurs on Firefox v83 and up; does not occur in Chrome, or in older versions of Firefox.

To Reproduce
JS FIDDLE EXAMPLE: https://jsfiddle.net/b594wnys/1/

Steps to reproduce the behavior:

1. Click and drag to select the first (left-most) two notes in the top staff
2. Click and drag again to select the last (right-most) few notes in the bottom staff

Expected behavior
In step 1, the first two notes are (correctly) selected.
In step 2, instead of the last few notes being selected as expected, all notes that fall into a rectangle drawn from the top-left corner of the screen to the cursor position (as its bottom-right corner) are selected.

Screenshots

After step 1: User has dragged to select first two notes. Selection appears to have worked, because a rectangle drawn from the top-left corner of the screen to final cursor position (next to the second note) doesn't include any other notes.

After step 2: User has dragged to select only the last (bottom-right) few notes, but all notes that fall within a rectangle drawn from the top-left corner of the screen to the final cursor position (next to the bottom-right-most note) are selected.

Alternatively, here the user has dragged to select only a single note: the one directly above the "o" in legatissimo; but again, all notes in a rectangle drawn from the top-left corner of the screen to the final cursor position (next to that single note) are selected.

Videos
Firefox behaviour:
https://drive.google.com/file/d/1xZ3e1mpET64DqdjIncB_2Mpl5QeyfRH9/view?usp=sharing

Chrome behavior: please ignore the text selection, that's NOT the bug :-). Only look at the notes!:
https://drive.google.com/file/d/1S4eXgcop7ZPczFvAPRud63gpakdk2_cb/view?usp=sharing

Desktop (please complete the following information):

• OS: Replicated on Fedora Linux v33, Mac OS X, Windows
• Browser: Only breaks in Firefox; works correctly in Chrome
• Version: Replicated on v83 (Fedora Linux / Mac OS X), v86 (Windows). Didn't break in older versions.

Nice library but I found one thing rather odd. I'm not sure if this is a bug or by design but I find that when I select an item then, hold down Ctrl or Command and drag select it deselects the original item if I drag over it.

You can reproduce this on your examples page:

1. Select any box (say #4)
2. Hold down Ctrl/Command
3. Drag select over all boxes including #4.

What happens:
1-3, 5-6 are selected. 4 is deselected.

What I would expect to happen:
1-6 are selected.

If this is a bug, please let me know if could fix it.
If this is by design: is it possible to make this an option. I would like the option to basically keep selected whatever was selected before the second (or nth) on drag was started.

Maybe different configurable keys for drag to add, drag to remove, drag for inverse selection. Not sure because I'm not sure of the original intent. I have some people scratching their heads over the current behaviour.

Thanks ahead for any time you can spare.

Describe the bug
In Chrome, console reads "ds.js:226 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at DragSelect._handleArea (ds.js:226)
at new DragSelect (ds.js:207)
at dragSelect.js:1
_handleArea @ ds.js:226
DragSelect @ ds.js:207
(anonymous) @ dragSelect.js:1"

...for both CodePen examples when running them locally on my machine.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/bxchang04/dragSelectTest
2. Open test.html
3. View console in browser (I'm using Chrome Version 80.0.3987.149 (Official Build) (64-bit))
4. See error

Expected behavior
Should output like the two codePens (https://codepen.io/ThibaultJanBeyer/pen/prpwYG/ and https://codepen.io/ThibaultJanBeyer/pen/Nvobgq/) in your gitHub. However, I just get all 6 items in the top left stacked on top of each other. The top one is selectable on click, but drag select does not work.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Windows 10
• Browser [e.g. chrome, safari]: Chrome
• Version [e.g. 22]: 80.0.3987.149 (Official Build) (64-bit))

Describe the bug
I have a appointment time requirements，In addition to the addition of the ability to edit, currently the component does not appear to be able to set the default selected value，So don't know how to fix the default.

To Reproduce
Steps to reproduce the behavior:

1. New selection for appointment time.
2. View booking times for details.
3. Edit Appointment Time.
4. Unable to set the default value.

Expected behavior
Expect to be able to set the default selected value.