fix modal

src/components/modal/index.js

@@ -4,12 +4,32 @@ import ReactDOM from "react-dom";
 import "./style.scss";
 
 export default class Modal extends Component {
+	modal = React.createRef();
+
+	componentWillMount() {
+		document.addEventListener("mousedown", this.handleClickOutside);
+	}
+
+	componentWillUnmount() {
+		document.removeEventListener("mousedown", this.handleClickOutside);
+	}
+
+	handleClickOutside = event => {
+		if (!this.props.open) return;
+
+		if (this.modal.current && !this.modal.current.contains(event.target)) {
+			this.props.close();
+		}
+	};
+
 	render() {
 		const { children, open } = this.props;
 		return open
 			? ReactDOM.createPortal(
-					<div className="modal" ref={this.modal}>
-						{children}
+					<div className="wrapper">
+						<div className="modal" ref={this.modal}>
+							{children}
+						</div>
 					</div>,
 					document.body
 			  )

src/components/modal/style.scss

@@ -3,8 +3,20 @@
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
+	z-index: 10;
 
 	padding: 30px;
 	border: 1px solid #eee;
+	background-color: #fff;
 	border-radius: 3px;
 }
+
+.wrapper {
+	width: 100vw;
+	height: 100vh;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 8;
+	background-color: rgba(0, 0, 0, 0.3);
+}

src/containers/remote-todo.js

@@ -40,6 +40,12 @@ export class RemoteTodo extends Component {
 		this.close();
 	};
 
+	cancelUpdatePostHandler = () => {
+		const { cancelUpdate } = this.props;
+		cancelUpdate();
+		this.close();
+	};
+
 	render() {
 		const {
 			changeInputValue,
@@ -52,7 +58,6 @@ export class RemoteTodo extends Component {
 			isFetching,
 			editForm,
 			editFormField,
-			cancelUpdate,
 			handleChangeEditForm
 		} = this.props;
 
@@ -139,9 +144,8 @@ export class RemoteTodo extends Component {
 							<Loder flag={isFetching}>
 								<Button text="Update Post" onClick={this.udatePostHandler} />
 							</Loder>
-							<Button text="CANCEL" onClick={cancelUpdate} />
+							<Button text="CANCEL" onClick={this.cancelUpdatePostHandler} />
 						</div>
-						<button onClick={this.close}>close</button>
 					</div>
 				</Modal>
 			</div>