fix(DND): Corrects issue of losing droppable event when releasing on non-event related containers (jquense#2199)

jquense#2198 jquense#1902

Author: LiniovasDovydas

src/Selection.js

@@ -38,11 +38,12 @@ const clickTolerance = 5
 const clickInterval = 250
 
 class Selection {
-  constructor(node, { global = false, longPressThreshold = 250 } = {}) {
+  constructor(node, { global = false, longPressThreshold = 250, validContainers = [] } = {}) {
     this.isDetached = false
     this.container = node
     this.globalMouse = !node || global
     this.longPressThreshold = longPressThreshold
+    this.validContainers = validContainers
 
     this._listeners = Object.create(null)
 
@@ -303,6 +304,20 @@ class Selection {
     }
   }
 
+  // Check whether provided event target element
+  // - is contained within a valid container
+  _isWithinValidContainer(e) {
+    const eventTarget = e.target;
+    const containers = this.validContainers;
+
+    if (!containers || !containers.length || !eventTarget) {
+      return true;
+    }
+
+    return containers.some(
+      (target) => !!eventTarget.closest(target));
+  }
+
   _handleTerminatingEvent(e) {
     const { pageX, pageY } = getEventCoordinates(e)
 
@@ -314,12 +329,13 @@ class Selection {
     if (!this._initialEventData) return
 
     let inRoot = !this.container || contains(this.container(), e.target)
+    let isWithinValidContainer = this._isWithinValidContainer(e)
     let bounds = this._selectRect
     let click = this.isClick(pageX, pageY)
 
     this._initialEventData = null
 
-    if (e.key === 'Escape') {
+    if (e.key === 'Escape' || !isWithinValidContainer) {
       return this.emit('reset')
     }
 

src/addons/dragAndDrop/WeekWrapper.js

@@ -152,7 +152,11 @@ class WeekWrapper extends React.Component {
     let node = this.ref.current.closest('.rbc-month-row, .rbc-allday-cell')
     let container = node.closest('.rbc-month-view, .rbc-time-view')
 
-    let selector = (this._selector = new Selection(() => container))
+    let selector = (
+      this._selector = new Selection(
+        () => container,
+        { validContainers: ['.rbc-day-slot', '.rbc-allday-cell'] }
+      ))
 
     selector.on('beforeSelect', (point) => {
       const { isAllDay } = this.props