diff --git a/src/Selection.js b/src/Selection.js index e64247d1d..b2714c17e 100644 --- a/src/Selection.js +++ b/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') } diff --git a/src/addons/dragAndDrop/WeekWrapper.js b/src/addons/dragAndDrop/WeekWrapper.js index b9dc36d27..0958b34df 100644 --- a/src/addons/dragAndDrop/WeekWrapper.js +++ b/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