From 0c90e2d490deed32afb8f30cc7a3e91a668ba8b5 Mon Sep 17 00:00:00 2001
From: Vladimir Borisov <borisov1024@gmail.com>
Date: Mon, 30 Sep 2019 14:41:34 +0300
Subject: [PATCH] Better handling of the close function

---
 src/common/ColorInput/ColorInput.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/common/ColorInput/ColorInput.js b/src/common/ColorInput/ColorInput.js
index a7d5f4b29..d6a3726a0 100644
--- a/src/common/ColorInput/ColorInput.js
+++ b/src/common/ColorInput/ColorInput.js
@@ -22,23 +22,19 @@ const ColorInput = ({ className, value, onChange }) => {
     }, [value, colorInputVisible]);
 
     const modalBackgroundOnClick = React.useCallback((event) => {
-        if (!event.nativeEvent.preventClose) {
+        if(event.target === event.currentTarget) {
             closeColorInput();
         }
     }, []);
 
-    const modalContentOnClick = React.useCallback((event) => {
-        event.nativeEvent.preventClose = true;
-    }, []);
-
     return (
         <React.Fragment>
             <Button className={className} title={selectedColor} onClick={showColorInput} style={{ backgroundColor: value }}></Button>
             {
                 colorInputVisible
                     ?
-                    <Modal className={classnames(styles['color-input-modal'])} onClick={modalBackgroundOnClick}>
-                        <div className={classnames(styles['color-input-container'])} onClick={modalContentOnClick}>
+                    <Modal className={styles['color-input-modal']} onMouseDown={modalBackgroundOnClick}>
+                        <div className={styles['color-input-container']}>
                             <Button onClick={closeColorInput}>
                                 <Icon className={classnames(styles['x-icon'])} icon={'ic_x'} />
                             </Button>