From bf9ddc10cbea05c13faee8d55f16fa41cb0ccf54 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Mon, 10 Feb 2020 14:41:24 +0100
Subject: [PATCH] Prevent closing modal on click inside

[MAILPOET-2602]
---
 assets/js/src/common/modal/frame.jsx             | 9 +++++++--
 assets/js/src/form_editor/components/preview.jsx | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/assets/js/src/common/modal/frame.jsx b/assets/js/src/common/modal/frame.jsx
index 1743e77b44..cc4cb98ab5 100644
--- a/assets/js/src/common/modal/frame.jsx
+++ b/assets/js/src/common/modal/frame.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
@@ -16,6 +16,7 @@ function ModalFrame({
   role,
   style,
 }) {
+  const wrapperRef = useRef(null);
   function onClose(event) {
     if (onRequestClose) {
       onRequestClose(event);
@@ -23,7 +24,10 @@ function ModalFrame({
   }
 
   function handleFocusOutside(event) {
-    if (shouldCloseOnClickOutside) {
+    if (shouldCloseOnClickOutside
+      && wrapperRef.current
+      && !wrapperRef.current.contains(event.target) // filter clicks inside the modal window
+    ) {
       onClose(event);
     }
   }
@@ -53,6 +57,7 @@ function ModalFrame({
       tabIndex="0"
     >
       <div
+        ref={wrapperRef}
         className={classnames(
           'mailpoet-modal-frame',
           className
diff --git a/assets/js/src/form_editor/components/preview.jsx b/assets/js/src/form_editor/components/preview.jsx
index 53637648a3..9cc12a3555 100644
--- a/assets/js/src/form_editor/components/preview.jsx
+++ b/assets/js/src/form_editor/components/preview.jsx
@@ -64,7 +64,7 @@ const FormPreview = () => {
         )}
         {form !== null && (
           <div>
-            <style type="text/css" id="mailpoet_form_preview_styles">
+            <style type="text/css">
               {'.mailpoet_hp_email_label { display: none }' }
               {form.css}
             </style>