BUG Prevent react-selectable from interfering with pagination

client/src/containers/Gallery/Gallery.js

@@ -49,6 +49,7 @@ class Gallery extends Component {
     this.handleBulkDelete = this.handleBulkDelete.bind(this);
     this.handleBulkMove = this.handleBulkMove.bind(this);
     this.handleBulkInsert = this.handleBulkInsert.bind(this);
+    this.handleBeginSelection = this.handleBeginSelection.bind(this);
     this.handleGroupSelect = this.handleGroupSelect.bind(this);
     this.handleClearSelection = this.handleClearSelection.bind(this);
     this.toggleSelectConcat = this.toggleSelectConcat.bind(this);
@@ -563,6 +564,28 @@ class Gallery extends Component {
     this.props.actions.gallery.deselectFiles();
   }
 
+  /**
+   * Pick if the selection started from inside the pagination. If it started from inside the
+   * pagination, cancel it to prevent inteference with the normal pagination.
+   * @param Event e
+   * @returns {boolean}
+   */
+  handleBeginSelection(e) {
+    /** @type Node */
+    let node = e.target;
+    // Loop the nodes until we find the root of the pagination or the root of the selectable area
+    while (node) {
+      if (node.classList.contains('griddle-footer')) {
+        return false;
+      }
+      if (node.classList.contains('gallery__main--selectable')) {
+        break;
+      }
+      node = node.parentNode;
+    }
+    return true;
+  }
+
   /**
    * Handles a user drilling down into a folder.
    *
@@ -921,6 +944,7 @@ class Gallery extends Component {
             className="flexbox-area-grow fill-height gallery__main--selectable"
             onSelection={this.handleGroupSelect}
             onNonItemClick={this.handleClearSelection}
+            onBeginSelection={this.handleBeginSelection}
             preventDefault={false}
             fixedPosition
           >

package.json

@@ -87,7 +87,7 @@
     "react-dom": "^16.6.1",
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.4.0-beta.6",
-    "react-selectable": "^2.0.2",
+    "react-selectable": "^2.1.1",
     "reactstrap": "^6.4.0",
     "redux": "^4.0.0",
     "redux-form": "^7.4.2",

yarn.lock

@@ -8127,10 +8127,10 @@ react-router@^4.4.0-beta.6:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-selectable@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/react-selectable/-/react-selectable-2.0.2.tgz#e6cceebefb00c6c2512c289f8bc4f76269219ff8"
-  integrity sha512-ALRYd33UOZBlDU/1rez4WwKo7mf2yBngy0pXg6LoE9Df5oGjkyfQ774LbF+f5prIHC5lzPqPunOUR673cwSHkg==
+react-selectable@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-selectable/-/react-selectable-2.1.1.tgz#21272e613929991e248570cc98a9266aa10eeecb"
+  integrity sha512-5W7WrC+TCchIwE8wDQhV5F1iJXNZJN09RsIa7kgl8P8tcG7UOYSkK6M3Jundec90mB7iN+KOLeLivSRdf9WrxQ==
 
 react-split-pane@^0.1.77:
   version "0.1.84"