Added 'disableSelectStartList' to disable select start on certain items

README.md

@@ -129,6 +129,7 @@ The `<SelectableGroup />` component accepts a few optional props:
 - `mixedDeselect` (Boolean) When enabled items can be selected and deselected with selectbox at the same time, `enableDeselect` should be set to `true`.
 - `scrollContainer` (String) Selector of scroll container which will be used to calculate selectbox position. If not specified SelectableGroup element will be used as scroll container.
 - `ignoreList` (Array) Array of ignored selectors.
+- `disableSelectStartList` (Array) Array of selectors where select lasso can not be started by dragging mouse. Useful if you want to enable drag of selectables.
 - `clickableClassName` (String) On elements with specified selector click item containing this element will be selected.
 - `tolerance` (Number) The amount of buffer to add around your `<SelectableGroup />` container, in pixels.
 - `className` (String) Class of selectable group element.

src/SelectableGroup.tsx

@@ -36,6 +36,7 @@ type TProcessItemOptions = TSelectItemsOptions & {
 export type TSelectableGroupProps = {
   globalMouse?: boolean
   ignoreList?: string[]
+  disableSelectStartList?: string[]
   scrollSpeed?: number
   minimumSpeedFactor?: number
   allowClickWithoutSelected?: boolean
@@ -92,6 +93,7 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
     tolerance: 0,
     globalMouse: false,
     ignoreList: [],
+    disableSelectStartList: [],
     scrollSpeed: 0.25,
     minimumSpeedFactor: 60,
     duringSelection: noop,
@@ -146,6 +148,12 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
 
   ignoreListNodes: HTMLElement[] = []
 
+  disableSelectStartCheckCache = new Map<HTMLElement, boolean>()
+
+  disableSelectStartList = this.props.disableSelectStartList!
+
+  disableSelectStartListNodes: HTMLElement[] = []
+
   selectbox: Maybe<Selectbox> = null
 
   selectableGroup: Maybe<HTMLElement> = null
@@ -471,10 +479,36 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
     return shouldBeIgnored
   }
 
+  isInDisableSelectStartList(target: HTMLElement | null) {
+    if (!target) {
+      return
+    }
+
+    if (this.disableSelectStartCheckCache.get(target) !== undefined) {
+      return this.disableSelectStartCheckCache.get(target)
+    }
+
+    const shouldBeIgnored = this.disableSelectStartListNodes.some(
+      disableSelectStartNode =>
+        target === disableSelectStartNode || disableSelectStartNode.contains(target)
+    )
+
+    this.disableSelectStartCheckCache.set(target, shouldBeIgnored)
+
+    return shouldBeIgnored
+  }
+
   updateWhiteListNodes() {
     this.ignoreListNodes = Array.from(document.querySelectorAll(this.ignoreList.join(', ')))
   }
 
+  updateDisableSelectStartListNodes() {
+    this.disableSelectStartListNodes =
+      this.disableSelectStartList.length > 0
+        ? Array.from(document.querySelectorAll(this.disableSelectStartList.join(', ')))
+        : []
+  }
+
   mouseDown = (e: Event) => {
     const isNotLeftButtonClick =
       !e.type.includes('touch') &&
@@ -489,13 +523,20 @@ class SelectableGroup extends Component<TSelectableGroupProps> {
     }
 
     this.updateWhiteListNodes()
+    this.updateDisableSelectStartListNodes()
 
     if (this.isInIgnoreList(e.target as HTMLElement)) {
       this.mouseDownStarted = false
 
       return
     }
 
+    if (this.isInDisableSelectStartList(e.target as HTMLElement)) {
+      this.mouseDownStarted = false
+
+      return
+    }
+
     if (this.props.resetOnStart) {
       this.clearSelection()
     }

website/index.html

@@ -226,6 +226,10 @@ <h3>
           scroll container.
         </li>
         <li><code>ignoreList</code> (Array) Array of ignored selectors.</li>
+        <li>
+          <code>disableSelectStartList</code> (Array) Array of selectors where select lasso can not
+          be started by dragging mouse. Useful if you want to enable drag of selectables.
+        </li>
         <li>
           <code>clickableClassName</code> (String) On element with specified selector click item
           cotaining this element will be selected.