Ensure mouse down and up happen in the backdrop before closing

Using onClick, a mouseDown in a child , then dragging your mouse, and a mouseUp in the background causes onClick to be called, and the target is the backdrop, thus it closes. This is no good when dragging a scrollbar as it is very easy to be dragging with the mouse down and release within the backdrop.

components/modal-backdrop/component.jsx

@@ -13,6 +13,8 @@ export class ModalBackdrop extends React.Component {
 		children: PropTypes.node.isRequired,
 	};
 
+	inMouseDown = false;
+
 	componentDidMount() {
 		document.body.style.overflow = 'hidden';
 	}
@@ -21,10 +23,18 @@ export class ModalBackdrop extends React.Component {
 		document.body.style.overflow = '';
 	}
 
-	handleBackdropClick = backdrop => {
-		if (backdrop.target === this._backdrop) {
+	handleBackdropMouseDown = event => {
+		if (event.target === this._backdrop) {
+			this.inMouseDown = true;
+		}
+	};
+
+	handleBackdropMouseUp = event => {
+		if (event.target === this._backdrop && this.inMouseDown) {
 			this.props.onClose();
 		}
+
+		this.inMouseDown = false;
 	};
 
 	render() {
@@ -35,7 +45,8 @@ export class ModalBackdrop extends React.Component {
 				innerRef={backdrop => {
 					this._backdrop = backdrop;
 				}}
-				onClick={this.handleBackdropClick}
+				onMouseDown={this.handleBackdropMouseDown}
+				onMouseUp={this.handleBackdropMouseUp}
 			>
 				{children}
 			</Styled.Backdrop>