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>